estoy intentando mostrar por pantalla el nombre de 151 Pokémon que obtengo mediante una API, el código es el siguiente:
Codigo actualizado con la respuesta de Dev. Joel:
import React, { Component } from 'react'
import axios from 'axios'
class HomeContainer extends Component {
componentDidMount() {
axios.get('https://pokeapi.co/api/v2/pokemon/?limit=151&offset=151') //Solicitud api
.then(({result}) => {
// console.log('aaa', result.data.results[0])
crearCarta(result)
})
.catch(error => {
console.log(error) //Solicitud error
})
}
render() { //Renderizamos el html
return (
<div>
<div className="navbar"></div>
<header id="container"></header>
</div>
);
}
}
function crearCarta(pokemons) {
console.log('Dentro de Crear Carta --> ', pokemons)
const container = document.getElementById('container')
console.log( 'Llamado a la API dentro de crearCarta' ,pokemons)
pokemons.forEach(id => {
container.innerHTML +=
`
<header id="container">
<h1>${pokemons.data.results[id].name}</h1>
</header>
`
});
}
export default HomeContainer
El problema es que me sale un error de forEach diciendo que no es una función, no entiendo el por que y no logro solucionarlo. ¿A qué se debe este problema?
Gracias
pokemons
dentro de la funcióncrearCarta()
.console.log()
de dicha variable dentro de la función para asegurar que el contenido de la misma es un array -o al menos que contiene algún dato-.