CODEWITHSUNDEEP
javascriptreactjsreact-hooksuse-state
Tapesh Patel
Tapesh Patel

Reputation: 139

How to reset the state in react when component is rendered or shown?

I am trying to do the pagination part in my app, however the data is correct, but the only issue is when I try to call or show a component i.e Trending.jsx on click of a button(Most Popular) and ( type of toggle button), at first it gets the correct page number, but when I hide that Trending.jsx component the page numbers remains the same, on my default page/component which is Movie.jsx

However, I want to reset page number if the component is not shown and start from 1 when a user clicks to see Trending.jsx and viceVersa

Please see the link to code sand box for the code I tried. https://codesandbox.io/s/moviehunt-demo-forked-rhom0?file=/src/components/Movies/Movies.jsx

Full live app: https://rhom0.csb.app/movies

Thanks for the help.

Upvotes: 1

Views: 2376

Answers (2)

Lin Du
Lin Du

Reputation: 102207

You don't need an effect to reset the page state. See you-might-not-need-an-effect#resetting-all-state-when-a-prop-changes documentation.

You can pass a key prop to the <PageNav/> component. In this way, you’re asking React to treat two <PageNav/> components with different key as two different components that should not share any state.

<PageNav
  key={showTrending ? "trending" : undefined}
  setPage={setPage}
  numberOfPages={numberOfPages}
/>

codesandbox

Upvotes: 3

Shivangam Soni
Shivangam Soni

Reputation: 706

As far as I understood, the problem is that when toggling back & forth between Movies & Trending, the Page Number is not getting reset to 1.

So, I created a useEffect with dependency on the state: showTrending in which I'm just updating the page number back to 1.

useEffect(() => {
    setPage(1);
}, [showTrending, setPage]);

Also in order to update the Page Number in Pagination, I passed the page as prop to PageNav so it gets updated automatically. I hope this is the solution you are looking for.

Code Sandbox: https://codesandbox.io/s/moviehunt-pagination-solution-hsc0f/?file=/src/components/Movies/Movies.jsx:2304-2305

Live: https://hsc0f.csb.app/movies

Also, I recommend adding some styling to the Most Popular Button so it's clear when it's Toggled On & Off.

Upvotes: 1

Related Questions