I am trying to make a webpage that displays the price of assets from different exchanges. I have a java class that makes the http requests and now I need to somehow call those variables with my js code that is designing my webpage. Any help would be amazing, and please let me know if there is anything else that should be added code-wise to help determine my issue?
I figure the calls go around here, but I am unsure if I need to also do anything in my java class, like save the variables in certain formats as right now they are in maps.
<div className = 'Middle'>
<Exchange name = "Coinbase" btcBuy = "" btcSell = "" ethBuy = "" ethSell = ""/>
<Exchange name = "Binance" btcBuy = "" btcSell = "" ethBuy = "" ethSell = ""/>
<Recommendations/>
</div>
There are a couple of issues. The first is how you deal with state - once you've got your data how can your component render it. The second is how do you call an endpoint lots of times, but still update the state with just one collection of data.
First: React functional components can use hooks, and in this example we're using both useState to store the data, and useEffect to get the data.
Second: build an array of promises (where each element in the array is a new fetch to the server), and then use Promise.all to wait for all of the server calls to resolve. You can then update the state with the data, and then use that state to render the component, and its child components.
The code will look vaguely like this.
const { useEffect, useState } = React;
function Example() {
const [ data, setData ] = useState([]);
useEffect(() => {
// Generic fetch params
const arr = [1, 2, 3];
async getData() {
// Get an array of fetch promises using the params
// Wait for them to resolve, return the parsed data, and
// then set the state with that data
const promises = arr.map(el => fetch(`endpoint?query${el}`));
const response = await Promise.all(promises);
const data = response.map(async el => await el.json());
setData(data);
}
getData();
}, []);
// `map` over the data to create your
// Exchange components
return (
<div>
{data.map(obj => {
<Exchange
name={obj.name}
btcBuy=""
btcSell=""
ethBuy=""
ethSell=""
/>
})}
</div>
);
};
ReactDOM.render(
<Example />,
document.getElementById('react')
);