I have React component :
import React from "react";
import { Pokemons } from "../Pokemons";
class Main extends React.Component {
state = {
pokemons: [],
};
componentDidMount() {
fetch("https://pokeapi.co/api/v2/pokemon?limit=20")
.then((responce) => responce.json())
.then((data) => this.setState({ pokemons: Object.values(data) }));
}
render() {
return (
<main className="container content">
<Pokemons pokemon={this.state.pokemons} />
</main>
);
}
}
export { Main };
The API I’m using is PokeAPI
My task is to display data about the first 20 Pokémon (which is what I’m trying to do in fetch() ). But I don’t get exactly what I need:
That is, JSON with four elements comes in response, the one I need is in the last one ( 3: ):
**In addition, each of the twenty objects (Pokémon) has a name and a link: **
From this I need only the name, the rest of the necessary information (type, height, sprite) are data on these links. Example data in the link:
In fact, the name of the pokemon is also in the data contained in these links.
I have never come across such an API structure before =(
Question – Help me get the name, type, sprite, height and weight of the Pokémon…