CODEWITHSUNDEEP
reactjsaxiosreact-hooks
Murilo de Jesus
Murilo de Jesus

Reputation: 123

Api not get pokemon names

I want to show a list of all water type pokemons, but an array with empty names is returned. In this case, this array has 151 positions, but 151 blank spaces appear in the name field.

import React, { useEffect, useState } from "react";
import axios from "axios";

export default function App() {
  const [pokemons, setPokemons] = useState([]);
  useEffect(() => {
    async function fetchPokemons() {
      const response = await axios.get("https://pokeapi.co/api/v2/type/10");
      setPokemons(response.data.pokemon);
    }
    fetchPokemons();
  }, []);
  return (
    <div>
      <h1>Pokemons tipo água</h1>

      {pokemons.map((pokemon, index) => (
        <div id="pokemon" key={index}>
          <li key={pokemon.name}>
            <p>
              Name: <a href={pokemon.url}>{pokemon.name}</a>
            </p>
          </li>
        </div>
      ))}
    </div>
  );
}

Upvotes: 1

Views: 122

Answers (1)

Raul H
Raul H

Reputation: 305

I think is just because every object inside the api array response has a key called pokemon inside so you just need to:

<a href={pokemon.pokemon.url}>{pokemon.pokemon.name}</a>

Or just destructure it, your call.

Upvotes: 1

Related Questions