Array data not mappable even though console shows data

March 23, 2022

I am having a small issue that I cannot seem to get right.
I am fetching data from Pokeapi to get some pokemon back, then iterating through that data in order to trigger another fetch request to bring back the associated data with a given pokemon.

I want to push this data to an array so that I can fire off this request as the application loads and save the data to storage so no new requests have to be made. However… (Which I have not done yet btw)

I console.log the results and the data is there, but when trying to map the data out, nada.

Please see my attempt below:

export function SomeComponent() {
  let arr = [];


  async function fetchPokemon() {
  const pokemon = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10')
   .then(response => response.json())
  for await (const x of pokemon.results.map(async (result) => await fetch(result.url)
  .then(response => response.json()))) {
    arr.push(x);
    }
  }

  fetchPokemon();
  console.log(arr)

return (
  <>
    {arr.map((pokemon) => (
       <p>
         {pokemon.name} 
       </p>
    ))}
  </>
 )
}

My best guess is that the console is displaying live results and that they data is not actually populated yet?

I would like to see the pokemon names displayed in the

tag.

>Solution :

In react we should use state to store data and useEffect to do side effect actions like fetching data :

export function SomeComponent() {
  const [arr, setArray] = useState([]);


  async function fetchPokemon() {
  const pokemon = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10')
   .then(response => response.json())
  for await (const x of pokemon.results.map(async (result) => await fetch(result.url)
  .then(response => response.json()))) {
    setArray([...arr, x]);
    }
  }
useEffect(() => {fetchPokemon()}, []}

return (
  <>
    {arr.map((pokemon) => (
       <p>
         {pokemon.name} 
       </p>
    ))}
  </>
 )
}