React, Axios, PokeAPI: undefined reading Map

Question

To improve my React skills I was following this tutorial to how create a list of name using PokeAPI.

I am stopped at 11.35, because I put this code as the tutorial show (the first block is from App.js, the second is from a component call PokemonList.js) :

function App() {
  const [pokemon, setPokemon] = useState([])

  useEffect(()=>{

    axios.get("https://pokeapi.co/api/v2/pokemon").then(res=> {
      setPokemon(res.data.result.map(p => p.name))
    })
  }, [])
  
   return (
    <PokemonList pokemon={pokemon}/>
  );
}

export default App;

  
    

export default function PokemonList({pokemon}){
    return (
        <div>
            {pokemon.map(p => (
                <div key={p}>{p}</div>
            ))}
        </div>
    )
}

But in the console I have the error message: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')

I have understand that I need to put a Promise.all in App.js (I found a similar question before to asking) but I have not clear how I must change in the PokemonList component to print the list on screen.

Answer 1

There is a typo. You have to change from result to results.