CODEWITHSUNDEEP
reactjsnext.jsgetstaticprops
Vaishali
Vaishali

Reputation: 25

passing fetched data from child to parent component in nextJs

In my nextjs application, I have 3 components: Home, Pagination, DataTable. I am fetching the data from the database in the Datatable component. It contains only a table.

I have created a pagination component.Its working good. I am calling the DataTable from Home component. And pagination inside the DataTable. But that is looking congested. I want to call the pagination component from home. For that I have to pass the data to pagination component from Home(but it is present in DataTable component only)

How can I implement that????

Upvotes: 0

Views: 448

Answers (1)

ALTHAF P JALEEL
ALTHAF P JALEEL

Reputation: 519

You have few options here

  1. Lifting state up

If multiple child components want to access the same data, it is then advised to lift the state up to the parent component and then pass the data as props to the child components. See the official doc on lifting state up

  1. Use a global state solution. Redux is one of them, there are others too.

Still, in your case the Pagination component seems to be closely associated with the DataTable component. So it makes sense to render the Pagination component from within the DataTable component rather than from the Home component. If you not want to display pagination in some cases, you can control it via props

Upvotes: 0

Related Questions