Hola, estoy tratando de mapear una matriz de una API para mostrar párrafos para cada índice dentro de la matriz. Sin embargo, sigo recibiendo un error:

**> TypeError: undefined no es un objeto (evaluando

'post.game_indices.version.name')**

Pero cuando registro una publicación en la consola y uso mis botones debajo, muestra lo que quiero y no indefinido. Entonces, ¿por qué no está definido cuando quiero mapear los párrafos?

'''

importar React, {useEffect,useState} desde 'react' importar instancia de './axios'

constante Inicio = () => {

 const [post, setPost] = useState(null); const [error,setError] = useState(null); const [showTypes,setShowTypes]=useState(false); const [showAbilities,setShowAbilities]=useState(false); useEffect(() => { instance.get("bulbasaur/").then((response) => { setPost(response.data); }).catch(error => { setError(error); }) },[]); console.log(post); if (error) return `Error: ${error.message}`; if (!post) return 'no post!' return ( <> <h1>{post.name}</h1> <button onClick={()=>setShowTypes(!showTypes)}>types</button> {showTypes? <p>{(post.types[0].type.name)}</p>:null} {showTypes? <p>{(post.types[1].type.name)}</p>:null} <button onClick={()=>setShowAbilities(!showAbilities)}>abilities</button> {showAbilities? <p>{(post.abilities[0].ability.name)}</p>:null} {showAbilities? <p>{(post.abilities[1].ability.name)}</p>:null} {/* <button onClick={gameVersion}>game versions</button> */} {post.game_indices.version.name.map(name => <p key={post.game_indices.version.name}>{name}</p>)} </> )

}

exportar Inicio predeterminado;

'''