What could be causing the "undefined property read" error even though the data is clearly defined?

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.

Answer №1

To improve your code, it is recommended to rename the function getPrices to getServerSideProps

You can find the refactored code on codesandbox at the following link.

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

Alternatively, you could create a separate function for getPrices and then call it within getServerSideProps

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

If the error state is true, MuiPhoneNumber component in react library will disable typing, preventing users from input

I am currently trying to implement the material-ui-phone-number plugin for react, using Material UI. Whenever the onChange event is triggered, it calls the handlePhone function which stores the input value in the state. However, I have encountered an issue ...

The error message TS2322 in MUI v5 states that the property 'fullWidth' is not found in the type 'IntrinsicAttributes & { theme: Theme; } & { children?: ReactNode; }'

As a user of MUI v5, I have implemented a straightforward FormControl as seen below. It is important to note that the property fullWidth is supported according to the official documentation. import React, { PropsWithChildren } from 'react' import ...

Showcasing Information Using AngularJS from a Json Array

My goal is to present data from a JSON array in a table using the code below. However, all the data is currently being shown in one row instead of each record appearing on separate rows with alternating colors - grey for even rows and white for odd rows. I ...

Steps for positioning an item above CardActionArea

I would like to figure out how to position an object above the CardActionArea. For example, if I have a button on top of the CardActionArea and click on that button, both the CardAction and Button actions will be triggered simultaneously. I want it so that ...

Sending JavaScript/jQuery variables to a different PHP page and navigating to it

For a while now, I've been working on: Executing a .js file on the client side (successful). Passing the returned object (the variables returned) as an array to another php page for further processing (successful but with issues). The first point, ...

Transferring data between functional components in ReactJS and dealing with the output of [object Object] or undefined

I'm struggling with passing a prop in functional components that are both located in the same .js file. I previously attempted to seek help for this issue, but unfortunately, it wasn't productive. My goal is to extract the member_id from the GET ...

Why does the Custom Colour function properly when applied in Tailwind CSS but not when defined as a constant in Next.js?

Code Demo When attempting to define constants for reusing certain color elements, I encounter a problem where the colors are not being correctly applied. A demo showcasing this issue along with a screenshot is attached below. https://i.sstatic.net/9nFE05 ...

How to use jQuery to dynamically assign a class to an li element

I'm attempting to use jQuery to add the 'block' class to specific li elements, but for some reason the class isn't being applied. The goal of the program is to display time slots and disable certain ones if they are blocked. Here's ...

Is it possible to manually input values when printing a PDF instead of pulling them from the main HTML?

I am facing a challenge in adding a "Print PDF" option to my website because it is built using Ext.js, and therefore the code is not in HTML. Despite searching for ways to print a PDF from the site, all solutions I found involve using HTML. Is there any li ...

Comparing $.fn.fancybox and $.fancybox: What sets them apart?

I'd like to understand the distinction between the two items shown above. In what ways do they differ from each other? ...

"Attempting to use push inside an if statement does not function as expected

The code snippet provided is causing an issue where `items.push` is not functioning correctly within the `if` statement. Interestingly, if you uncomment the line just before the closing brace `}`, then `items.push` works as intended. for (i = 0; i < ...

Display the QWebEngineView page only after the completion of a JavaScript script

I am currently in the process of developing a C++ Qt application that includes a web view functionality. My goal is to display a webpage (which I do not have control over and cannot modify) to the user only after running some JavaScript code on it. Despit ...

Alert: Mouse Exiting Window - Moodle Prompt

I have created an online exam using the Moodle platform, coded in PHP. I am now looking for a way to prevent test-takers from navigating away from the test by implementing a mouseover pop-up. Below is the code I have for triggering an alert pop-up when th ...

Looking for non-case-sensitive letters in a text input field

Having trouble with case-insensitive search using jquery? The search option seems to be working fine, but there's an issue with uppercase and lowercase letters in the content. Check out my full code on jsfiddle where if I search for "senthil" it doesn ...

Evaluating different attributes within a single entity

I was attempting to write some code that checks if two individuals share the same birthday. Person "a" and person "b" do not have the same birthday, yet the console output shows: a was born on day 1 a has the same birthday as a a has the same birthday as ...

Guide on extracting JSON data from specific nodes using d3.js

Just starting out with d3.js and following the example of a simple molecule created by d3 at http://bl.ocks.org/mbostock/3037015. I have a couple questions: 1. How can I select multiple nodes within the molecule structure? 2. Once selected, how do I ext ...

Navigate to the Bootstrap Panel body when the relevant link is clicked

I am facing an issue with a long list of panels that are tedious to scroll through. To make navigation easier, I am attempting to create a shortcut link at the top of the page. Below is the code for the shortcut: <a data-toggle="collapse" data-parent ...

Animating a ThreeJS Mesh using the TweenMax scaling method

Having issues trying to implement a scaling translation to my mesh[0] using TweenMax. While other animations like rotation work fine, I encounter an 'Uncaught TypeError: Cannot assign to read only property 'scale' of object '#'&apo ...

Retrieve the id of an element from a JSON object

Dealing with quotes, single or double, can sometimes pose a challenge. I am working on a JavaScript function that sends data to a PHP file and receives a JSON response. Everything seems to be functioning correctly, except for the part where I need to out ...

Is it possible to translate the content of the page into English and French simply by clicking on the designated buttons?

As I dive into working with knockout, I am still in the learning process. Currently, I have a dropdown code where selecting English translates the entire page to English and selecting French translates it to French without any issue. I believe this functio ...