The first proper component (sorry header and footer) I would need to create are the pokemon cards that would appear on the page. The plan was that the cards would have the dex number, image, name and the typing of pokemon.

Once these cards are clicked a modal would pop up with more information and favourites button.

Creating the pokemon card component

I know I wanted each card to be coloured with the corresponding type of each pokemon so we had to include some sort of styling variable.

Pokemoncards.jsx:

The breakdown of how it works is here:

• Functional component declaration that takes in the data parameters of id, image, name, type and openModal function.
• CSS class name styling that combines the ‘type’ property with the string “card-container”
• JSX structure for the content
• The outermost has a class name assigned based on the style variable we defined earlier. It also has an onClick event that triggers the openModal function when the component is clicked.
• Inside this container, there's another displaying the Pokemon number (#0{id}).
• Depending on whether there's an image ({img ? ... : ...}), it renders either an tag with the Pokemon image or a paragraph (

  ) saying "No image available."

• Finally, there's another containing the Pokemon's name and type
• Export statement so that the PokemonCard component can be used in other parts of the application

In my App.css file I had declared a hex value for each pokemon type so that the cards would be coloured depending on that. In the future I would love to add some sort of colour effect for pokemon with multiple types. I had seen some people do a gradient if the pokemon was dual typed where the top of the card was one colour blending into a new colour at the bottom.

Creating the pokemon modal component

Unfortunately the pokemon modal component proved more difficult than the pokemon card which led me to having to create separate components for the favourited component and you'll see why shortly.

PokemonModal.jsx:





How it works:

• Functional declaration for parameters pokemon, image, type and the closeModal function
• Object typeColorMap maps the pokemon types to specific colors
• modalStyle variable sets the background colour to gray if a type can’t be identified
• useState hook to create a piece of state isInFavourites and a function setIsInFavourites to manage whether the current pokemon is in the user’s favourites
• useEffect hook is used to fetch data when the component mounts or the pokemon.id changes – it checks if the current pokemon is in the user’s favourites and updates the state accordingly
• handleFavourites uses the fetch function to add or a remove a pokemon from the users favourites
• JSX structure to render the component

Closing remarks

As you can see the initial modal is fetching the data from the pokemon API. Once you add the pokemon to favourites the favourites page is using the information in the db.json file rather than the API.

To work around this I passed each of the rendered values for the pokemon to the json server so that the new modal can use that data to produce the component that looks the same.

In the next post I'll go over the favourites modal and how that works.