title: Problem with using deeper nested data fetched from API
body: <p>I encountered a problem when I try to fetch some data from PokeAPI. Here's my code for PokemonCard component.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useEffect, useState } from "react";
  import axios from "axios";
  
  const PokemonCard = ({ pokemonID }) =&gt; {
    const [pokemon, setPokemon] = useState({});
    useEffect(() =&gt; {
      (async () =&gt; {
        const result = await axios.get(
          `http://pokeapi.co/api/v2/pokemon/${pokemonID + 1}`
        );
        setPokemon(result.data);
      })();
  
      // console.log(pokemon.weight)
    }, [pokemonID]);
    return (
      &lt;div className="pokemon"&gt;
        {pokemon.sprites.front_default}
      &lt;/div&gt;
    );
  };
  
  export default PokemonCard;</code></pre>
  </div>
  </div>
  </p>
  <p>Everything works properly when I try to reach data like: <code>pokemon.weight</code> or <code>pokemon.base_experience</code>. But I get errors when I try to use some deeper nested variables.</p>
  <p><code>pokemon.sprites.front_default</code> gives me an error TypeError:</p>
  <blockquote>
  <p>Cannot read property 'front_default' of undefined.</p>
  </blockquote>
  <p>Here's a sample of data from API:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    "name": "bulbasaur",
      "order": 1,
      "species": {
          "name": "bulbasaur",
          "url": "https://pokeapi.co/api/v2/pokemon-species/1/"
      },
      "sprites": {
          "back_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/1.png",
          "back_female": null,
          "back_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/1.png",
          "back_shiny_female": null,
          "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png",
          "front_female": null,
          "front_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/1.png",
          "front_shiny_female": null
      },
      "stats": [        
          {
              "base_stat": 45,
              "effort": 0,
              "stat": {
                  "name": "hp",
                  "url": "https://pokeapi.co/api/v2/stat/1/"
              }
          }
      ],
      "types": [
          {
              "slot": 2,
              "type": {
                  "name": "poison",
                  "url": "https://pokeapi.co/api/v2/type/4/"
              }
          },
          {
              "slot": 1,
              "type": {
                  "name": "grass",
                  "url": "https://pokeapi.co/api/v2/type/12/"
              }
          }
      ],
      "weight": 69</code></pre>
  </div>
  </div>
  </p>
  <p>PS. Is it a good practice to make about 150 separate calls to API in every child component? Or should I somehow do it with one call? Thank you.</p>