I'm currently facing a challenge with my script in NextJS/React where I am finding it difficult to save state and reuse data in a variable.
import React from 'react';
import Head from 'next/head'
import Image from 'next/image'
import axios from 'axios';
import styles from '../styles/Home.module.css'
export default function Home() {
const [ETHdata, setETHData] = React.useState({ });
const [CryptoDATA, setCryptoDATA] = React.useState({ });
Everything seems to be running smoothly at this point :)
However, the issue arises when I try to fetch data from an API:
const fetchETH = async () => {
const res = await axios.get('https://api.coingecko.com/api/v3/simple/price?ids=Ethereum&vs_currencies=CHF&include_24hr_change=true');
if (res.data && res.data.ethereum) {
setETHData(res.data.ethereum);
}
}
Instead of rewriting the same code for multiple cryptocurrencies, I decided to fetch them all at once here:
const fetchCryptoDATA = async () => {
const res = await axios.get('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Cethereum%2Ccrypto-com-chain%2Csolana%2Cavalanche-2%2Cblockstack%2Cflow%2Clitecoin%2Calgorand%2Ccardano&vs_currencies=CHF&include_24hr_change=true');
if (res.data ) {
setCryptoDATA(res.data);
}
console.log(CryptoDATA)
}
When displaying the fetched data:
React.useEffect(() => {
fetchETH();
fetchCryptoDATA();
}, []);
return (
...
everything works as expected
<p>Ethereum {ETHdata['chf']} {parseFloat(ETHdata['chf_24h_change']).toFixed(2)}</p>
But
<p>ETHEREUM {CryptoDATA['ethereum']['chf']} {parseFloat(CryptoDATA['ethereum']['chf_24h_change']).toFixed(2)}</p>
initially displays correctly, but on subsequent loads, it returns
"Cannot read property 'chf' of undefined"
I believe it's a small issue that I may have overlooked and would appreciate any assistance you can provide!