Problem with using deeper nested data fetched from API

Question

I encountered a problem when I try to fetch some data from PokeAPI. Here's my code for PokemonCard component.

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

const PokemonCard = ({ pokemonID }) => {
  const [pokemon, setPokemon] = useState({});
  useEffect(() => {
    (async () => {
      const result = await axios.get(
        `http://pokeapi.co/api/v2/pokemon/${pokemonID + 1}`
      );
      setPokemon(result.data);
    })();

    // console.log(pokemon.weight)
  }, [pokemonID]);
  return (
    <div className="pokemon">
      {pokemon.sprites.front_default}
    </div>
  );
};

export default PokemonCard;

Everything works properly when I try to reach data like: pokemon.weight or pokemon.base_experience. But I get errors when I try to use some deeper nested variables.

pokemon.sprites.front_default gives me an error TypeError:

Cannot read property 'front_default' of undefined.

Here's a sample of data from API:

    "name": "bulbasaur",
    "order": 1,
    "species": {
        "name": "bulbasaur",
        "url": "https://pokeapi.co/api/v2/pokemon-species/1/"
    },
    "sprites": {
        "back_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/1.png",
        "back_female": null,
        "back_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/1.png",
        "back_shiny_female": null,
        "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png",
        "front_female": null,
        "front_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/1.png",
        "front_shiny_female": null
    },
    "stats": [        
        {
            "base_stat": 45,
            "effort": 0,
            "stat": {
                "name": "hp",
                "url": "https://pokeapi.co/api/v2/stat/1/"
            }
        }
    ],
    "types": [
        {
            "slot": 2,
            "type": {
                "name": "poison",
                "url": "https://pokeapi.co/api/v2/type/4/"
            }
        },
        {
            "slot": 1,
            "type": {
                "name": "grass",
                "url": "https://pokeapi.co/api/v2/type/12/"
            }
        }
    ],
    "weight": 69

PS. Is it a good practice to make about 150 separate calls to API in every child component? Or should I somehow do it with one call? Thank you.

Penny Liu · Accepted Answer · 2021-06-28 04:19:54Z

1

You were trying to access a key inside an undefined key of pokemon variable. Please check the updated line where you are actually rendering.

{pokemon.sprites ? pokemon.sprites.front_default : ''}

As Pokemon is an empty object before the api fetches the data and updates to the state, so pokemon.sprites is actually undefined.

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

const PokemonCard = ({ pokemonID }) => {
  const [pokemon, setPokemon] = useState({});
  useEffect(() => {
    (async () => {
      const result = await axios.get(
        `http://pokeapi.co/api/v2/pokemon/${pokemonID + 1}`
      );
      setPokemon(result.data);
    })();

    // console.log(pokemon.weight)
  }, [pokemonID]);
  return (
    <div className="pokemon">
      //this should work for you
      {pokemon.sprites ? pokemon.sprites.front_default : ''}
    </div>
  );
};

export default PokemonCard;

edited Jun 28, 2021 at 4:19

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered May 9, 2019 at 19:09

Deepak

8805 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Oskar Nawara Over a year ago

Yeah, it works now, thank you very much for your time.

Deepak Over a year ago

@OskarNawara No worries. Also, don't forget to upvote to indicate that the above solution serves the purpose.

Oskar Nawara Over a year ago

Yeah I did but: Thanks for the feedback! Votes cast by those with less than 15 reputation are recorded, but do not change the publicly displayed post score. :(

Penny Liu · Accepted Answer · 2021-06-28 06:21:58Z

0

Gets much easier in Optional chaining (?.)

pokemon.sprites?.front_default

answered Jun 28, 2021 at 6:21

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

Collectives™ on Stack Overflow

Problem with using deeper nested data fetched from API

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related