tudo bem?
Estou começando agora no mundo do React e estou com esse pequeno problema em questão. Como faço para especificar o consumo de um Array especifico com o React?
Por exemplo:
"count": 1118,
"next": "https://pokeapi.co/api/v2/pokemon?offset=20&limit=20",
"previous": null,
"results": [
{
"name": "bulbasaur",
"url": "https://pokeapi.co/api/v2/pokemon/1/"
},
{
"name": "ivysaur",
"url": "https://pokeapi.co/api/v2/pokemon/2/"
},
{
"name": "venusaur",
"url": "https://pokeapi.co/api/v2/pokemon/3/"
}
....
Eu já consigo como consumir todos os dados do array, porém, como faço pra pegar apenas 1? Tipo, como faço para pegar apenas o:
"name": "bulbasaur",
"url": "https://pokeapi.co/api/v2/pokemon/1/"
eu já dei um console.log(response.data.results[0]) e me mostrou exatamente o que eu queria, mas sempre que eu faço isso no this.setState({pokemon: response.data.results}) o .map da um erro falando que não é uma função e vi que .map só consegue funcionar com array...
import React, { Component } from 'react';
import axios from 'axios';
const api = axios.create({
baseURL: 'https://pokeapi.co/api/v2/pokemon'
})
class App extends Component{
state={
pokemon: [],
}
async componentDidMount(){
const response = await api.get('');
this.setState({pokemon: response.data.results})
}
render() {
const { pokemon } = this.state;
return (
<div>
<h1>Pkemon</h1>
{pokemon.map(pk => (
<li key={pk}>
<h2>{pk.name}</h2>
<h2>{pk.url}</h2>
</li>
))}
</div>
);
};
};
export default App;
response.data.result
- segundo o exemplo de retorno que vc colocou, seriaresponse.results
.