In Next.js: How to pass the async data fetched by getServerSideProps... to a component?

Question

Thanks for hopping on the question! I'm still learning and might need you to explain it to me like I'm 5.

What's working well:

On my Homepage, I'm getting data from getServerSideProps and mapping it. The data is being fetched from a data.json within the project folder.

export default function Homepage({ data }) { ... }

export async function getServerSideProps() { ... }

Homepage has Mapping Function No. 1... This is working well for me!

What I want to do:

Now, I want to access the data that getServerSideProps() fetches, from inside of a component called ListComponent.

I want to be able to use original data again, in Mapping Function No. 2. I want this to happen inside of ListComponent.

ListComponent will then be imported to my Homepage.

What didn't work:

Inside of ListComponent, I tried passing in the same data that I was using on the Homepage, like this:

export default function ListComponent({ data }) { ... }

It did not work. It says data is undefined, or that data cannot be read. Why is that? How can I pass the data to ListComponent?

score 0 · Answer 1 · answered Feb 13 '23 at 05:34

You just need to pass the data as props:

export default function Homepage({ data }) {
  return (
   // ...
   <ListComponent data={data} />
   // ...
  )
}

Now, you have data as data props:

export default function ListComponent({ data }) { 
  // play with data
}

1 Answers1