Cannot access array inside of map function to return props to different component

Question

I am fetching data from an API. I am building an array of 5 objects using the API call. What I am trying to do is iterate over the array, use the data inside each array index to build a component and pass along the props to another component.

I've tried accessing the element the same way I normally would by doing: img={pokemon.name} but it keeps returning undefined. When I type in console.log(pokemon) I get the individual pokemon stored within the array of objects.

import React, { Component } from "react";
import Pokecard from "./Pokecard";

async function getPokemon() {
  const randomID = Math.floor(Math.random() * 151) + 1;
  const pokeRes = await fetch(`https://pokeapi.co/api/v2/pokemon/${randomID}/`);
  const pokemonJSON = await pokeRes.json();
  return pokemonJSON;
}

function buildPokemon() {
  let pokemonArr = [];
  let builtPokemon = {};

  getPokemon()
    .then(data => {
      builtPokemon.name = data.forms[0].name;
      builtPokemon.exp = data.base_experience;
      builtPokemon.img = data.sprites.front_default;
      builtPokemon.type = data.types[0].type.name;

      pokemonArr.push(builtPokemon);
    })
    .catch(err => console.log(err));
  return pokemonArr;
}

class Pokedex extends Component {
  constructor(props) {
    super(props);
    this.state = { pokemonArr: [] };
  }
  componentDidMount() {
    const pokemonArr = [];
    for (let i = 0; i < 5; i++) {
      pokemonArr.push(buildPokemon());
    }
    this.setState({ pokemonArr });
  }
  render() {
    console.log(this.state.pokemonArr);
    return (
      <div className="Pokedex">
        {this.state.pokemonArr.map(pokemon => console.log(pokemon))}
      </div>
    );
  }
}

export default Pokedex;

What should happen is that when I map the pokemonArr I want to create 5 separate pokemon by doing this.state.pokemonArr.map(pokemon => <Pokecard name={pokemon.name} but I keep getting undefined whenever I check this.props in the Pokecard component.

I think my buildPokemon() function is working because when I call it in the componentDidMount() and then I console.log this.state.pokemonArr in the render() function, I actually get an array returned with 5 different pokemon with the proper fields filled out.

And also when I map out this.state.pokemonArr.map(pokemon => clg(pokemon)), it actually displays each individual pokemon. When I pass the pokemon item into a component like this <Pokecard name={pokemon}/>, I see all the pokemon data. when I type <Pokecard name={pokemon.name} I get undefined

charlietfl · Accepted Answer · 2019-07-31 01:19:04Z

0

There are several problems with your approach but the main one is that getPokemon() is asynchronous.

Return the getPokemon() promise from buildPokemon() and return the object from it's then()

In your for() loop create an array of these promises and use Promise.all() to set state once they have all resolved

function buildPokemon() {

  let builtPokemon = {};
  // return the promise
  return getPokemon()
    .then(data => {
      builtPokemon.name = data.forms[0].name;
      builtPokemon.exp = data.base_experience;
      builtPokemon.img = data.sprites.front_default;
      builtPokemon.type = data.types[0].type.name;
      // return the object
      return builtPokemon
    });
}


componentDidMount() {
  const pokemonPromises = [];
  for (let i = 0; i < 5; i++) {
    pokemonPromises.push(buildPokemon());
  }
  Promise.all(pokemonPromises).then(pokemonArr => this.setState({ pokemonArr }));    
}

answered Jul 31, 2019 at 1:19

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

4 Comments

Journey_Man Over a year ago

Thank you SO much. This worked. I have a question if you don't mind. If I'm trying to store an array of asynchronous data, I should send back the object as a promise, then call it in my loop and store each promise in an array of promises, and then Promise.all and update the state? Sorry if what I said was confusing. Long-story short I need to be more careful around asynchronous data.

charlietfl Over a year ago

Short answer is you were returning the array before it got populated. And on top of that you were creating an array of arrays. I left that last part out of my explanation to minimize confusion.

charlietfl Over a year ago

So now you have an array of promises with each promise returning a single object. Promise.all() returns an array of those objects once resolved

Journey_Man Over a year ago

Thank you again charlie, your explanation was great too. I see exactly what I was doing wrong now. You rock dude.

ravibagul91 · Accepted Answer · 2019-07-31 01:21:53Z

0

componentDidMount executes after first render, initially your state is pokemonArr: [] (whch is empty) so you are getting an error. You need to conditionally render like,

{this.state.pokemonArr.length > 0 && this.state.pokemonArr.map(pokemon => console.log(pokemon))}

Side Note:

In buildPokemon function you are returning an array, and again in componentDidMount you are storing it in array which creates array of array's, you just need to return object from buildPokemon function.

edited Jul 31, 2019 at 1:21

answered Jul 31, 2019 at 1:15

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Comments

Joseph D. · Accepted Answer · 2019-07-31 01:32:14Z

The problem is mainly how the Promise should be resolved.

The data isn't available right away so the state (pokemonArr) should only be set once data is available.

Here's the refactored component:

class Pokedex extends Component {
  constructor(props) {
    super(props);
    this.state = { pokemonArr: [] };
  }
  componentDidMount() {
    for (let i = 0; i < 5; i++) {
      this.getPokemon()
        .then((pokemon) => this.buildPokemon(pokemon));
    }
  }
  async getPokemon() {
    const randomID = Math.floor(Math.random() * 151) + 1;
    const pokeRes = await fetch(`https://pokeapi.co/api/v2/pokemon/${randomID}/`);

    return pokeRes.json();
  }
  setPokemon(pokemon) {
    this.setState({
      pokemonArr: [
        ...this.state.pokemonArr, pokemon
      ],
    });
  }
  buildPokemon(data) {
    let builtPokemon = {};

    builtPokemon.name = data.forms[0].name;
    builtPokemon.exp = data.base_experience;
    builtPokemon.img = data.sprites.front_default;
    builtPokemon.type = data.types[0].type.name;

    this.setPokemon(builtPokemon);
  }
  render() {
    return (
      <div className="Pokedex">
        {this.state.pokemonArr.map(pokemon => console.log(pokemon))}
      </div>
    );
  }
}

Collectives™ on Stack Overflow

Cannot access array inside of map function to return props to different component

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related