export async function getPrices() {
const res = await fetch(
"https://sandbox.iexapis.com/stable/crypto/BTCUSD/price?token=Tpk_1d3fd3aee0b64736880534d05a084290"
);
const quote = await res.json();
return {
props: { quote }
};
}
export default function IndexPage({ quote }) {
return (
<div>
<p>{quote.price}</p>
</div>
);
}
I am attempting to retrieve the price of a cryptocurrency using an API called IEX Cloud, which works well in Postman. However, I am facing difficulties displaying the data on my Next.js application.
You can view the MRE (Minimal Reproducible Example) here:
https://codesandbox.io/s/nostalgic-wave-6sidm?fontsize=14&hidenavigation=1&theme=dark
When trying to access the 'price' property from the response object, I receive a
TypeError: Cannot read property 'price' of undefined
. Although, accessing the route directly in a browser or Postman clearly shows that 'price' is defined.
The line <p>{quote.price}</p>
in my code is where the error occurs.
I believe it's a simple misunderstanding on my part, but I'm struggling to find a solution. Any assistance would be greatly appreciated.