Cannot read properties of undefined error when working with an API in React

Question

I am fetching data from an API which returns an array of objects in this format.

{Name: 'hitmonchan', Description: 'Fighting-type Pokémon introduced in Generation I'}
{Name: 'Gogoat', Description: 'A quadrupedal, hooved Pokémon similar to a goat'}... and so on

Here is what I am attempting to do. I fetch all the pokemons which is over 500, stuff them in an array called allPokemons. Then I want to do stuff with 4 random pokemons from the list. So I will have an array called smallRandomPokemonArray with only four pokemons chosen at random from the allPokemon array.

import { useEffect, useState } from 'react';
import { getallPokemons } from '../services/pokemonapi';

const empty_pokemon = {
    'Name': '',
    'Description': ''
}

function PokemonComponent() {


    const [allPokemons, setAllPokemons] = useState([]);
    const [smallRandomPokemonArray, setSmallRandomPokemonArray] = useState([]);

    useEffect(() => {
        getAll();
    }, []);

    const getAll = () => {
        getallPokemons()
            .then(data => {

                //actual data with over 500 objects show in log
                console.log(data);
                setAllPokemons(data);
                randomChooser(data.length)
            })
    }

    const randomChooser = (length) => {
        let temporaryArray = [];
        for (let i = 0; i < 4; i++) {
            const randomIndex = Math.floor(Math.random() * length);

            //First Problem: this is returning index in numbers followed by undefined... why?
            console.log(randomIndex + " " + allPokemons[randomIndex]);
            temporaryArray.push(allPokemons[randomIndex]);

            //Second Problem: this is also returning "temp undefined"
            console.log("temp " + temporaryArray[i]);
        }
        setSmallRandomPokemonArray(temporaryArray);
    }

    return (
        <>
            <div className="pokemondiv">
                {
                    smallRandomPokemonArray.map((element) => (
                        <div>
                            <p>{element.Name}</p>
                            <p>{element.Description}</p>
                        </div>
                    ))
                }
            </div>
        </>
    )
}

export default PokemonComponent;

When I try to print values from the setSmallRandomPokemonArray I get that error:

Uncaught TypeError: Cannot read properties of undefined (reading 'Name')

Also, please look at First problem and Second problem part in the code. They are also appearing as undefined in the console.log. From my understanding, it should work because allPokemons already exist when I start to randomize it. Then I just push four random values to the smallRandomPokemonArray. I dont know why its throwing the error.

Youssouf Oumar · Accepted Answer · 2023-04-29 08:10:48Z

Issue

You are calling randomChooser(data.length) just after setAllPokemons(data); in getAll. At this point allPokemons which is used inside randomChooser is still [].

emptyArray[0] == undefined. undefined.Name = Cannot read properties of undefined. The takeaway is that when you call a setState, the related state is updated asynchronously. A re-render is needed to have the updated value.

Solution

Change getAll to the code below, so its only job is to populate allPokemons state:

const getAll = () => {
  getallPokemons().then((data) => {
    setAllPokemons(data);
  });
};

Then use an useEffect to get the four Pokemon you need:

useEffect(() => {  
  /*
    I moved randomChooser here, so you don't have to put it in useEffect's 
    dependencies array, which if you do, you should wrap randomChooser in a 
    useCalback, as otherwise you get an infinite call.
  */
  const randomChooser = (length) => {
    const temporaryArray = [];
    for (let i = 0; i < 4; i++) {
      const randomIndex = Math.floor(Math.random() * length);
      temporaryArray.push(allPokemons[randomIndex]);
    }
    setSmallRandomPokemonArray(temporaryArray);
  };
  if (allPokemons.length <= 0) return;
  randomChooser(allPokemons.length);
}, [allPokemons]);

Another Solution

You could change randomChooser so that it receives the array, not its length:

const randomChooser = (allPokemons) => {
  let temporaryArray = [];
  for (let i = 0; i < 4; i++) {
    const randomIndex = Math.floor(Math.random() * allPokemons.length);
    temporaryArray.push(allPokemons[randomIndex]);
  }
  setSmallRandomPokemonArray(temporaryArray);
};

Then change getAll so you give data to randomChooser:

const getAll = () => {
  getallPokemons().then((data) => {
    setAllPokemons(data);
    randomChooser(data);
  });
};

urchmaney · Accepted Answer · 2022-05-28 16:50:34Z

The allPokemons have not been set at the point where you are using it in randomChooser. react will set all state after the function finished running. You need to pass the data into randomChooser.

 const randomChooser = (data) => {
    const length = data.length
    let temporaryArray = [];
    for (let i = 0; i < 4; i++) {
        const randomIndex = Math.floor(Math.random() * length);

        //First Problem: this is returning index in numbers followed by undefined... why?
        console.log(randomIndex + " " + data[randomIndex]);
        temporaryArray.push(data[randomIndex]);

        //Second Problem: this is also returning "temp undefined"
        console.log("temp " + temporaryArray[i]);
    }
    setSmallRandomPokemonArray(temporaryArray);
}

Collectives™ on Stack Overflow

Cannot read properties of undefined error when working with an API in React

2 Answers 2

Issue

Solution

Another Solution

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Issue

Solution

Another Solution

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related