Why do I get a "cannot read property of undefined" error when the data is defined?

Anthony

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'm trying to return the price of a cryptocurrency using an API called IEX Cloud, which seems to work fine when tested in Postman. My problem is I can't seem to return the data on my Next.js app.

Please find the MRE here:

Edit nostalgic-wave-6sidm

I get TypeError: Cannot read property 'price' of undefined, but if you access the route in a browser or Postman you can see there is a 'price' defined.

https://sandbox.iexapis.com/stable/crypto/BTCUSD/price?token=Tpk_1d3fd3aee0b64736880534d05a084290

<p>{quote.price}</p> is the line in my code that throws up the error.

I'm sure it's a very obvious misunderstanding on my part but I am really stuck. Can anyone help?

Babar Khan

You need to change the function name getPrices to getServerSideProps

Here is your refactor code in codesandbox.

https://codesandbox.io/s/billowing-frost-lb9xm?file=/pages/index.js

or you can create separate function for getPrices and call it in getServerSideProps

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

TOP Ranking

HotTag

Archive