How do I specify the consumption of an API in React?

Asked

Viewed 40 times

1

all right?

I’m starting now in the world of React and I have this little problem in question. How do I specify the consumption of a specific Array with React?

For example:

"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/"
    }

....

I can already consume all the data in the array, however, how do I get only 1? Like, how do I get only the:

"name": "bulbasaur",
"url": "https://pokeapi.co/api/v2/pokemon/1/"

i already gave a console.log(Response.data.Results[0]) and showed me exactly what I wanted, but whenever I do so in this.setState({Pokemon: Response.data.Results}) the . map gives an error saying that it is not a function and saw that . map can only work with 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;
javascript react axios

  • The first thing I noticed is that it doesn’t exist response.data.result - according to the example of return you put, would be response.results.

1 answer

1


When you want to work with state you need to create within the state the information so you want to organize, in your case you want to get the first position of the array then indicate [0] if it is a array having an amount greater than zero and always separate the information. Your mistake is because you have a position of the array which is an object, and therefore map is used as a method of array.

In this example I use two states and in pokemon is to demonstrate the example that for your display is totally different when it is to array, example:

const api = axios.create({
    baseURL: 'https://pokeapi.co/api/v2/pokemon'
});


class App extends React.Component {
  state={
    pokemons: [],
    pokemon: null
  }
  componentDidMount(){
      api.get('')
        .then(response => {
          this.setState({pokemons: response.data.results});
          if (response.data.results.length) {
              this.setState({pokemon: response.data.results[0]});
          }
        });      
  }
  render() {
    const { pokemon } = this.state;
    return (
      <div>
        <h1>Pkemon</h1>
        <ul>
        {pokemon && (
          <li key={pokemon.name}>
            <h2>{pokemon.name}</h2>
            <h2>{pokemon.url}</h2>
          </li>
        )}
        </ul>
      </div>
    );
  };
};

ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="root">...</div>

Browser other questions tagged javascript react axios

You are not signed in. Login or sign up in order to post.