The react pokedex pages

For a final post I feel like I should discuss the pages themselves and how they render the way they do.

Pokedex page

How it works:

• Import statements
• Functional component declaration for Pokedex component
• State hooks to create and manage state variables (when a component needs to “remember” some information between renders) within the pokedex component
• getAllPokemons function is responsible for fetching data about Pokemon from the PokeAPI. It updates the state with the fetched data and the URL for the next set of Pokemon.
• Modal interaction functions to make it visible/hidden
• useEffect hook is used here to run the getAllPokemons function when the component mounts (due to the empty dependency array []). This ensures that the initial set of Pokemon is fetched when the component is first rendered.
• JSX structure that defines how the component is rendered
• Export statement

Favourites page

Again the favourites page functions a little differently as it is fetching data from the json server rather than the API. Here is the code breakdown of the page:

How it works:

• Import statements
• Functional component declaration for the Favourites component
• The useState hooks create and manage state variables within the Favourites component. State allows the component to keep track of data that may change over time.
• The useEffect hook is used here to run the fetchFavourites function when the component mounts (due to the empty dependency array []). This ensures that the list of favorite Pokemon is fetched when the component is first rendered.
• Function to fetch favourite pokemon data - updates the state with the fetched data
• Modal interaction functions - open and close
• Function to update favourite pokemon - passed down to the FavouritesModal component. It updates the state with the latest list of favorite Pokemon after a Pokemon is added or removed.
• JSX structure to render the component
• Export statement

Final thoughts

So that pretty much sums up the entire project and how I was able to make it. Big thanks to Albert for being an amazing mentor. If you want to check out the app you can access it here: https://p2-app.vercel.app/pokedex