I have a little question that I've been trying to solve on my own for several days and I can't do it, the idea I have is to make a small pokedex where it shows the name and image of each pokemon, I want to do this by generating it with a pokemon API with id 1 to id 151, I was able to generate the names, but the problem is that the image is inside a URL, here is an example:
And once inside the url obtained, this is the information there is:
Well, having been able to access there through the following code:
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})
})
})
}
What I want to do is be able to enter the URL of all the pokemon, I think this is changing the index that is in
axios.get(pokemons[ACA].url)
and then I want to show it here:
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>
);
}
}
I was able to generate the names using destructuring, my current problem is how to generate all the images.
If someone knows how I can do to get all the images of the pokemon from the URL obtained from the API, it would help me to know.
The problem is that you are not going through each of the "pokemon" to look for the image of each one.
Solution:
Search the info of all the pokemon obtained in parallel ( until you have ALL, you don't see any )
Example: