title: ReactJS: how to access prop from child component
body: <p>I'm learning React.js and I'm trying to make a website with the pokeAPI.</p>
  <p>For one of my widget I want to display several pokemons with their statistics.</p>
  <p>To do this, I have a main component that will call the API and populate my state array, then call a CardPokemon child component within a map to display each one of the pokemon.</p>
  <p>Here is my problem, in my web console I can see that my different pokemons stats state array are filling up, but in the render of my main component the values of my array remain &quot;undefined&quot;.</p>
  <p>I tried to implement the first answer to this question: <a href="https://stackoverflow.com/questions/56652909/why-react-props-are-passed-undefined-to-the-child-component?answertab=votes#tab-top">why react props are passed undefined to the child component?</a> in my code, but I still have the same problem, the values of my array remain &quot;undefined&quot; in the render.</p>
  <p>I put a part of my code here, any help would be greatly appreciated.</p>
  <pre><code>class CardPokemon extends Component {
    render() {
      return (
        &lt;div className=&quot;Card&quot;&gt;
          &lt;div className=&quot;Card__img&quot;&gt;
            &lt;img src={this.props.pokemonImgProp[this.props.id]} alt=&quot;&quot; /&gt;
          &lt;/div&gt;
           ...
        &lt;/div&gt;
      );
    }
  }
  
  class GenerationPokemonStat extends Component {
    constructor(props) {
      super(props);
      this.state = {
        pokemonNameListAPI: [],
        pokemonImgAPI: []
        ...
      };
    }
  
    searchAllPokemon = () =&gt; {
      let number = 151; //for the 151 first pokemon
      Axios.get(`http://localhost:5000/getPokemonByGeneration/allPokemonGen/${number}`)
        .then(res =&gt; {
          var i;
          for (i = 0; i &lt; number; i++) {
            let copyNameArray = this.state.pokemonNameListAPI.slice();
            copyNameArray[i] = res.data.results[i].name;
            this.setState({ pokemonNameListAPI: copyNameArray })
            
  Axios.get(`http://localhost:5000/getPokemonByGeneration/one_pokemon_gen/${this.state.pokemonNameListAPI[i]}`)
              .then(response =&gt; {
  
                let copyImgArray = this.state.pokemonImgAPI.slice();
                copyImgArray[i] = response.data.sprites.front_default;
                this.setState({ pokemonImgAPI: copyImgArray });
        
                ...
  
                //everything display normally in web console here
                console.log(response);
                console.log(this.state.pokemonNameAPI[i]);
                console.log(this.state.pokemonImgAPI[i]);
              })
          }
        })
    }
  
    render() {
      let pokemonNameListAPI = this.state.pokemonNameListAPI;
      let pokemonImgAPI = this.state.pokemonImgAPI;
  
      //appears to be undefined in web console
      console.log(this.state.pokemonImgAPI[0]);
  
      if(!pokemonNameListAPI) {
          return null;
      }
  
      return (
        &lt;&gt;
          &lt;div&gt;
            &lt;button onClick={this.searchAllPokemon}&gt;Search Pokemon&lt;/button&gt;
            {pokemonNameListAPI[151] === undefined ? &lt;h1 style={{ textAlign: 'center' }}&gt;Loading...&lt;/h1&gt; : (
              &lt;&gt;
                &lt;div className=&quot;grid-container&quot;&gt;
                  {pokemonNameListAPI.map((i) =&gt; {
  
                    //this console.log show me undefined for pokemonImgAPI[i]
                    console.log(pokemonImgAPI[i]);
  
                    return &lt;CardPokemon
                      key={i}
                      id={i}
                      pokemonImgProp={pokemonImgAPI}
                    /&gt;
                  })}
                &lt;/div&gt;
              &lt;/&gt;
            )}
          &lt;/div&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default GenerationPokemonStat;
  </code></pre>
  <p><strong>Code edited but still not working</strong>
  I've try to implement what you told me but it still not working, am I doing it the good way ?</p>
  <pre><code>function CardPokemon({ pokemonStatProp }) {
    return (
      &lt;div className=&quot;Card&quot;&gt;
        &lt;div className=&quot;Card__img&quot;&gt;
          &lt;img src={pokemonStatProp[1]} alt=&quot;&quot; /&gt;
        &lt;/div&gt;
        &lt;div className=&quot;Card__name&quot;&gt;
          {pokemonStatProp[0]}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  class GenerationPokemonStat extends Component {
    constructor(props) {
      super(props);
      this.state = {
        pokemonNameAPI: [],
        pokemonImgAPI: [],
        pokemonLoading: true
      };
    }
  
    searchAllPokemon = () =&gt; {
      this.setState({ pokemonLoading: true });
      let number = 10;
      Axios.get(`http://localhost:5000/getPokemonByGeneration/allPokemonGen/${number}`)
        .then(res =&gt; {
  
          let nameArray = this.state.pokemonNameListAPI.slice();
          let imgArray = this.state.pokemonImgAPI.slice();
  
          for (let i = 0; i &lt; number; i++) {
            nameArray[i] = res.data.results[i].name;
            Axios.get(`http://localhost:5000/getPokemonByGeneration/one_pokemon_gen/${nameArray[i]}`)
              .then(response =&gt; {
  
                imgArray[i] = response.data.sprites.front_default;
              })
          }
          this.setState({ pokemonNameListAPI: nameArray });
          this.setState({ pokemonImgAPI: imgArray });
          this.setState({ pokemonLoading: false });
        })
    }
  
    render() {
      return (
        &lt;&gt;
          &lt;div&gt;
            &lt;button onClick={this.searchAllPokemon}&gt;Search Pokemon&lt;/button&gt;
            {this.state.pokemonLoading === true ? &lt;h1 style={{ textAlign: 'center' }}&gt;Loading...&lt;/h1&gt; : (
              &lt;&gt;
                &lt;div className=&quot;grid-container&quot;&gt;
                  {this.state.pokemonNameListAPI.map((i) =&gt; {
                    let pokemonStat = [];
                    pokemonStat[0] = this.state.pokemonNameListAPI[i];
                    pokemonStat[1] = this.state.pokemonImgAPI[i];
                    return &lt;CardPokemon
                      key={i}
                      pokemonStatProp={pokemonStat}
                    /&gt;
                  })}
                &lt;/div&gt;
              &lt;/&gt;
            )}
          &lt;/div&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default GenerationPokemonStat;
  </code></pre>