Para mejorar mis habilidades de React, estaba siguiendo este tutorial sobre cómo crear una lista de nombres usando PokeAPI .

Me detuve a las 11.35, porque puse este código como muestra el tutorial (el primer bloque es de App.js, el segundo es de un componente llamado 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> ) }

Pero en la consola tengo el mensaje de error: Uncaught (en promesa) TypeError: No se pueden leer las propiedades de undefined (leyendo 'mapa')

Tengo entendido que necesito poner un Promise.all en App.js (encontré una pregunta similar antes de preguntar) pero no tengo claro cómo debo cambiar en el componente PokemonList para imprimir la lista en pantalla.