Problem: I have a function fetchPokemonData which fetch some data from an API and returns an array of objects. I am trying to display(console.log) the data into another component.

What I have tried?

I created another async function fetchData to store the return value (the array) in a variable and then updated the state.

Code from fetchPokemonData:

async function fetchPokemonData() {
  const pokemonDataArray = []; // Store images objects

  for (let i = 0; i < 10; i++) {
    const randomDex = Math.floor(Math.random() * 100) + 1;
    const response = await fetch(
      `/${randomDex}`
    );
    const pokemonInfo = await response.json();

    pokemonDataArray.push({
      id: i,
      name: pokemonInfo?.name,
      url: pokemonInfo?.sprites?.front_default,
    });
  }

  return pokemonDataArray;
}
export { fetchPokemonData };

Code from DisplayImages:

import { useEffect, useState } from "react";
import { fetchPokemonData } from "./fetchImages";

function DisplayImages() {
    const [pokemonDataArr, setPokemonDataArr] = useState([]);
    const fetchData = async () => {
        const response = await fetchPokemonData();
        console.log(response);
        setPokemonDataArr(response);
        console.log(response);
        return response;
    }

    useEffect(() => {
        fetchData();
console.log(pokemonDataArr)
    }, []);

    return (
        <h1>{pokemonDataArr[0]}</h1>
    )
}

export {DisplayImages};

This code is not showing me any logs

Problem: I have a function fetchPokemonData which fetch some data from an API and returns an array of objects. I am trying to display(console.log) the data into another component.

What I have tried?

I created another async function fetchData to store the return value (the array) in a variable and then updated the state.

Code from fetchPokemonData:

async function fetchPokemonData() {
  const pokemonDataArray = []; // Store images objects

  for (let i = 0; i < 10; i++) {
    const randomDex = Math.floor(Math.random() * 100) + 1;
    const response = await fetch(
      `https://pokeapi.co/api/v2/pokemon/${randomDex}`
    );
    const pokemonInfo = await response.json();

    pokemonDataArray.push({
      id: i,
      name: pokemonInfo?.name,
      url: pokemonInfo?.sprites?.front_default,
    });
  }

  return pokemonDataArray;
}
export { fetchPokemonData };

Code from DisplayImages:

import { useEffect, useState } from "react";
import { fetchPokemonData } from "./fetchImages";

function DisplayImages() {
    const [pokemonDataArr, setPokemonDataArr] = useState([]);
    const fetchData = async () => {
        const response = await fetchPokemonData();
        console.log(response);
        setPokemonDataArr(response);
        console.log(response);
        return response;
    }

    useEffect(() => {
        fetchData();
console.log(pokemonDataArr)
    }, []);

    return (
        <h1>{pokemonDataArr[0]}</h1>
    )
}

export {DisplayImages};

This code is not showing me any logs

• javascript
• reactjs

• 1 This question is similar to: The useState set method is not reflecting a change immediately. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – pilchard Commented Mar 19 at 16:39

1 Answer 1

Since your using, an useEffect, with [], as the dependency, this means that the code is executed when the page is executed.

The "problem" of not showing the state, is due to the fact, that you are using useState, that is also "async", which means, that even if you did in the useEffect, something like this, the output could be null:

    useEffect(() => {
        setPokemonDataArr("test")
        console.log(pokemonDataArr)
    }, []);

One way, you could solve this, (assuming you want to see only the log), is adding the pokemonDataArr as a dependency of the useEffect. This ensures that, the code inside the useEffect, is triggerd when pokemonDataArr has changed.

    useEffect(() => {
        console.log(pokemonDataArr)
    }, [pokemonDataArr]);

Assuming that you want to display the object (You dont specify your purpose with this code, you can add a guard (a verification)

 return (
        <h1>{pokemonDataArr && pokemonDataArr[0]}</h1>
    )