…here is the modified code without hard-coding the list of coins:
LiveTickers function
const COINT_COUNT = 5;
function LiveTickers() {
const [coins, setCoins] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function getCoins(){
try{
const response = await axios.get('https://api.coinpaprika.com/v1/tickers');
const topCoins = response.data.slice(0, COINT_COUNT).map( coin => coin.id); // Get the top 5 coins
const tickerurl = "https://api.coinpaprika.com/v1/tickers/";
const promises = topCoins.map( async (coin) => { return axios.get(tickerurl + coin); });
const responses = await Promise.all(promises);
const coins = responses.map( response => response.data);
setCoins(coins);
setLoading(false);
}
catch(error){
setError(error);
setLoading(false);
}
}
getCoins();
}, []);
if (loading) return <div>Loading... It will be just a moment.</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<div>
<CoinTable>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Ticker</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{coins.map(coin => (
<Tr key={coin.id}>
<td>#{coin.rank}</td>
<td>{coin.name}</td>
<td>{coin.symbol}</td>
<td>{parseFloat(coin.quotes.USD.price).toFixed(2)}</td>
</Tr>
))}
</tbody>
</CoinTable>
</div>
);
}
export default LiveTickers;