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.
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.