codex-lv3-may-2025

Kata 15: Fetch All Pokemon and Display Names and Height

Concept: Map pattern with fetched array data (using for loop)

Challenge

Create a PokemonList component that:

1. Fetches all pokemon from: https://pokeapi.co/api/v2/pokemon?limit=20
2. The response has a results array with pokemon data
3. Each pokemon in results needs to be fetched individually (use results[i].url)
4. Use a for loop to map over all pokemon and collect their names and heights
5. Display a list showing each pokemon’s name and height

🔗 Practice on CodeSandbox

Expected Output

Displays a list like:

Pokemon List:
- bulbasaur: height 7
- ivysaur: height 10
- venusaur: height 20
... (and more)

Starter Code

import { useState, useEffect } from 'react';

export default function PokemonList() {
  const [pokemonList, setPokemonList] = useState([]);
  
  useEffect(() => {
    async function fetchAllPokemon() {
      // Step 1: Fetch list of pokemon
      const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20');
      const data = await response.json();
      
      // Step 2: MAP: Fetch each pokemon and extract id, name, and height using for loop
      const pokemonData = [];
      // Your for loop here
      
      setPokemonList(pokemonData);
    }
    
    fetchAllPokemon();
  }, []);
  
  if (pokemonList.length === 0) {
    return <div>Loading...</div>;
  }
  
  return (
    <div>
      <h3>Pokemon List:</h3>
      <ul>
        {pokemonList.map((pokemon) => (
          <li key={pokemon.id}>{pokemon.name}: height {pokemon.height}</li>
        ))}
      </ul>
    </div>
  );
}

Hints

• First fetch gets list: data.results is an array
• Each result has a url property: data.results[i].url
• Inside the loop, fetch each pokemon: await fetch(data.results[i].url)
• Parse each response: await response.json()
• Store data objects with id: pokemonData.push({ id: pokemon.id, name: pokemon.name, height: pokemon.height })
• Use .map() in JSX to render: pokemonList.map((pokemon) => ...)
• Use pokemon.id as the key: key={pokemon.id}
• Use Promise.all() is optional but helps with performance

Solution

Click to reveal solution

import { useState, useEffect } from 'react';

export default function PokemonList() {
  const [pokemonList, setPokemonList] = useState([]);
  
  useEffect(() => {
    async function fetchAllPokemon() {
      // Step 1: Fetch list of pokemon
      const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20');
      const data = await response.json();
      
      // Step 2: MAP: Fetch each pokemon and extract id, name, and height using for loop
      const pokemonData = [];
      for (let i = 0; i < data.results.length; i++) {
        const pokemonResponse = await fetch(data.results[i].url);
        const pokemon = await pokemonResponse.json();
        pokemonData.push({
          id: pokemon.id,
          name: pokemon.name,
          height: pokemon.height
        });
      }
      
      setPokemonList(pokemonData);
    }
    
    fetchAllPokemon();
  }, []);
  
  if (pokemonList.length === 0) {
    return <div>Loading...</div>;
  }
  
  return (
    <div>
      <h3>Pokemon List:</h3>
      <ul>
        {pokemonList.map((pokemon) => (
          <li key={pokemon.id}>{pokemon.name}: height {pokemon.height}</li>
        ))}
      </ul>
    </div>
  );
}

Concept Review

Using For Loop for Data Transformation

• Map pattern with for loop: Transform each item to create a new array with different structure
• Loop through data.results array using a for loop
• For each result, fetch the full pokemon data
• Extract and transform data: { id: ..., name: ..., height: ... }
• Push transformed objects into new array: pokemonData.push({ id: pokemon.id, name: pokemon.name, height: pokemon.height })
• Store the transformed data in state
• This is the List Scrolling Pattern from Code.org - see Code.org List Scrolling Pattern
• Using for loop: Good for practice and keeping sharp with list patterns. This helps you understand what’s happening under the hood and reinforces the fundamental pattern.

Using .map() Method for Rendering

• Built-in .map() method: Transform array items into JSX elements for display
• Used in the JSX return: pokemonList.map((pokemon) => <li key={pokemon.id}>...</li>)
• A popular shorthand alternative in React that can be used directly in JSX
• Cleaner and more concise than a for loop for rendering
• Automatically handles creating an array of JSX elements
• The .map() method is the built-in JavaScript way to do the map pattern

Understanding Unique Keys in React

• Why keys are important: React uses keys to identify which items have changed, been added, or removed
• Unique keys: Each key must be unique among siblings (items in the same list)
• Using index as key: While key={index} works, it’s not ideal because:
  • Index can change if items are reordered, filtered, or removed
  • React can’t efficiently track which item is which when the list changes
  • Can cause performance issues and bugs with component state
• Using unique IDs: Using key={pokemon.id} is better because:
  • Each pokemon has a unique, stable ID that doesn’t change
  • React can correctly identify each item even when the list order changes
  • Better performance when rendering dynamic lists
  • Prevents bugs with component state persistence
• Best practices:
  • Always use unique, stable identifiers when available (like database IDs)
  • Only use index as key when the list is static (never reordered or filtered)
  • When no unique ID exists, create one or use a combination of unique properties

Why Use Both?

• For loop in useEffect: Good for algorithmically transforming data in. Also great for practice and understanding the underlying pattern.
• .map() in JSX: Ideal for rendering because it’s clean, readable, and React-optimized. This is the popular shorthand you’ll see in most React code.
• Storing data (not JSX) in state allows you to manipulate/filter/sort the data before rendering

Note: Learn more about the built-in .map() method at MDN: Array.map()

Challenge Variation

Try:

• Fetch more pokemon: change limit=20 to limit=50
• Add weight to the display
• Sort pokemon by height
• Group pokemon by type

---

← Back to Kata Index