Tengo una pequeña duda que estoy intentando resolver por mi cuenta hace varios días y no lo puedo lograr, la idea que tengo es hacer una pequeña pokedex donde muestre el nombre y la imagen de cada pokemon, esta la quiero hacer generando con una API del pokemon con el id 1 al id 151, ya pude generar los nombres, pero el problema es que la imagen esta dentro de una URL, aquí un ejemplo:
Y una vez dentro de la url obtenida, esto es la información que hay:
Bien, ya habiendo podido acceder ahi mediante el siguiente codigo:
componentDidMount() {
axios.get('https://pokeapi.co/api/v2/pokemon/?limit=151&offset=151') //Solicitud api de los pokemon
.then(({ data }) => {
const { results: pokemons } = data; //Destructuracion
this.setState({ pokemons });
console.log({pokemons})
axios.get(pokemons[4].url) //Entro a la URL del pokemon 4
.then(({ data: pokemon }) => {
this.setState({ pokemon })
console.log('aaaa', {pokemon})
})
})
}
Lo que yo quiero hacer, es poder entrar a la URL de todos los pokemon, esto pienso que es cambiando el indice que esta en
axios.get(pokemons[ACA].url)
y luego quiero mostrarlo aca:
render() {
return (
<div>
// <img src="{this.state.pokemon.sprites.front_default}" alt="" />
<div id="container">
<div className="grid-style">
{this.state.pokemons.map((pokemon) => ( //Aca muestro los nombres
<div className="item"
key="{ID}">
<p className="texto">{pokemon.name}</p>
</div>
))}
</div>
</div>
</div>
);
}
}
Ya pude generar los nombres usando la destructuración, mi problema actual es como generar todas las imágenes.
Si alguien sabe como puedo hacer para sacar todas las imágenes de los pokemon de la URL obtenida de la API, me serviría saberlo.