title: 'TypeError: Cannot read property of x of undefined' when passing data from parent to child component but others are working
body: <p>Good day, I have a project that gets a response from an API then passes down the data from parent to child. The problem is, I can easily access the response at the top level but when I try to get in the inner parts of the API (in this case, the <code>price={statistics.quotes.USD.price}</code>) , I'm getting the <code>TypeError: Cannot read property 'USD' of undefined</code> error. I have tried console.logging the price to check if my path is correct and it is. Why could this be happening when I can access other data correctly?</p>
  <p><strong>Overview.js</strong></p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import Statistics from './Statistics';
  import axios from 'axios';
  
  export default function Overview(props) {
      const id = props.match.params.currency;
  
      //some other states here
  
      const [statistics, setStatistics] = useState({});
  
      //some code
  
      const fetchBasicData = async () =&gt; {
          // Retrieves a coin's basic information
          const apiCall = await axios.get('https://api.coinpaprika.com/v1/coins/' + id);
          let basicData = await apiCall.data;
  
          setCoin(basicData);
              
          // Retrieves coin statistics
          const fetchedData = await axios.get('https://api.coinpaprika.com/v1/tickers/' + id);
          const coinStats = await fetchedData.data;
  
          setStatistics(coinStats);
      }
  
      useEffect(function () {
          if (Object.keys(coin).length === 0 &amp;&amp; Object.keys(statistics).length === 0) {
              fetchBasicData();
          }
      })
  
      //some code
  
      return (
          &lt;div&gt;
              //some other stuff
              &lt;Statistics
                  statistics={statistics}
                  lastUpdate={statistics.last_updated}
                  price={statistics.quotes.USD.price}          // &lt;----- this is where the error occurs
               /&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p><strong>Statistics.js</strong></p>
  <pre><code>import React from 'react';
  
  export default function Statistics(props) {
      return (
          &lt;div&gt;
              &lt;h1&gt;Statistics&lt;/h1&gt;
              &lt;p&gt;Last updated: {props.lastUpdate}&lt;/p&gt;
              &lt;p&gt;Price: {props.price}&lt;/p&gt;
              &lt;p&gt;Market Rank: {props.marketRank}&lt;/p&gt;
              &lt;h2&gt;Supply&lt;/h2&gt;
              &lt;p&gt;Circulating supply: {props.circulatingSupply}&lt;/p&gt;
              &lt;p&gt;Max supply: {props.maxSupply}&lt;/p&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>