React JS Pokedex Tutorial – Part 3 – Detail View and Navigation

Welcome to the third part of our React JS Pokedex tutorial series. In this part, we will focus on creating a detailed view for each Pokemon and adding navigation between the list view and the detail view.

Detail View

To create a detailed view for each Pokemon, we will start by creating a new component called PokemonDetail. This component will receive the selected Pokemon as a prop and display its details, such as its name, image, and type.

function PokemonDetail({ pokemon }) {
  return (
    <div>
      <h2>{pokemon.name}</h2>
      <img src={pokemon.image} alt={pokemon.name} />
      <p>Type: {pokemon.type}</p>
    </div>
  );
}

Once we have the PokemonDetail component, we can use it in our main App component to display the details of the selected Pokemon. We can also add a condition to only render the PokemonDetail component when a Pokemon is selected.

function App() {
  const [selectedPokemon, setSelectedPokemon] = useState(null);

  return (
    <div>
      {selectedPokemon ? <PokemonDetail pokemon={selectedPokemon} /> : <PokemonsList setSelectedPokemon={setSelectedPokemon} />}
    </div>
  );
}

Navigation

To add navigation between the list view and the detail view, we can create a button in the PokemonDetail component to go back to the list view. We will also update the PokemonsList component to pass the selected Pokemon to the PokemonDetail component when it is clicked.

function PokemonDetail({ pokemon, goBack }) {
  return (
    <div>
      <button onClick={goBack}>Go Back</button>
      <h2>{pokemon.name}</h2>
      <img src={pokemon.image} alt={pokemon.name} />
      <p>Type: {pokemon.type}</p>
    </div>
  );
}

function PokemonsList({ pokemons, setSelectedPokemon }) {
  return (
    <ul>
      {pokemons.map((pokemon) => (
        <li key={pokemon.id} onClick={() => setSelectedPokemon(pokemon)}>{pokemon.name}</li>
      ))}
    </ul>
  );
}

With this setup, we now have a functioning Pokedex with a list view and a detailed view for each Pokemon, as well as navigation between the two views.

Stay tuned for the next part of our tutorial series, where we will add more features to our React JS Pokedex, such as searching and filtering Pokemon.