title: PokeAPI - Fetching Pokemon Data
body: <p>I have just started to learn React and I am trying to build a PokeDex using the PokeAPI, but I am having an extremely hard time understanding how to fetch data from the API. I want to fetch the first 384 Pokemon related information. I have written this code below in componentDidMount() to extract the complete data in my main App class component, and push it to an array called pokemonArray which I will set to my state.</p>
  
  <pre><code>let pokemonArray = [];
  /* First API fetch call to return names and URL's of first 384 Pokemon after promise is resolved.*/
  fetch('https://pokeapi.co/api/v2/pokemon/?limit=384')
    .then(response =&gt; response.json())
    .then(data =&gt; {
      let results = data.results;
      let promisesArray = results.map(result =&gt; {
        return fetch(result.url).then(response =&gt; response.json()).then(data =&gt; pokemonArray.push(data));
      })
      return Promise.all(promisesArray)
    }).then(this.setState({ pokemon: pokemonArray }, () =&gt; console.log('Main Pokemon State: ', this.state.pokemon)));
  
  }
  </code></pre>
  
  <p>In my render method I want to pass this newly set state as a prop to a component called PokeList like so</p>
  
  <pre><code>&lt;PokeList pokemon={this.state.pokemon} /&gt;
  </code></pre>
  
  <p>Once I pass it on and I try to render it out in my PokeList component like so </p>
  
  <pre><code>export const PokeList = ({ pokemon }) =&gt; {
      console.log(pokemon);
  
      return (
          &lt;div className="pokecard-container"&gt;
              &lt;h1&gt;{pokemon[0].id}&lt;/h1&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>I get an error that says <strong>TypeError: Cannot read property '0' of null</strong>. The React Developer tools shows the state being populated with the retrieved values as well as the props being set as well, but it seems to consider it null. Could anyone please help out with this, it's been so frustrating to see this error out</p>