You might have noticed the Next and Previous buttons. Try giving them a click.
Notice that the page number changes but it doesn’t update the list of characters.
🙋🏻 Which component includes the Prev Page and Next Page buttons?
Navigation component
🙋🏻 How does the Next button update the state of the currentPage variable?
You pass the setCurrentPage function down as a prop into the component. The setCurrentPage function is provided by the useState hook and allows us to update the state of the currentPage variable.
We could say that a “side effect” of changing the currentPage variable would be getting another page of character data.
🙋🏽♀️ What hook might we use to implement a side effect action?
The useEffect hook
👉 We can use the useEffect hook again to attach an action to the currentPage changing. Update your useEffect defintion, let’s remove that hard coding of the pageNumber being 1 and utilise the currentPage variable.
useEffect(() => {
getCharacters(currentPage);
}, [currentPage]);
Also notice below that we put the currentPage variable as a value in the array of dependencies. This tells the hook that our side effect should run every time the currentPage variable changes.
👉 Try your pagination now, do the characters change when you click Next or Previous? If they do go ahead and commit/push your changes up. We’re making great progress!!
Now lets move on to activity 4 and enable the favouriting of characters