title: Cannot read property "Name" of undefined in reactjs
body: <p>I'm experiencing something bizarre or maybe I just missed something? I'll walk you through the codebase:</p>
  <p>Annex 1.1 We are using react useState and useEffect hooks to update our state when pulling data from the API. <code>resCrypto.data.Data[0]</code> returns a single object with different properties</p>
  <pre><code>function Financeticker() {
      const classes = useStyles();
      const [crypto, setCrypto] = useState([]);
  
      useEffect(() =&gt; {
          axios
              .get(
                  `https://min-api.cryptocompare.com/data/top/totalvolfull?limit=10&amp;tsym=USD&amp;api_key=xxxxxxxxxxxxxxxxxxxxxxxx`
              )
              .then((resCrypto) =&gt; {
                  console.log(resCrypto.data.Data[0]);
                  setCrypto(resCrypto.data.Data[0]);
              })
              .catch((err) =&gt; {
                  console.log(err);
              });
      }, []);
  </code></pre>
  <p>Annex 1.2 <code>const cryptoTicker</code> is a variable within the component that contains the contents of what I'm going to render. The problem is when I call <code>{crypto.CoinInfo.Name}</code> I get Cannot read property 'Name' of undefined.</p>
  <pre><code>const cryptoTicker = (
          &lt;Grid item container xs={2}&gt;
              &lt;Card className={classes.root}&gt;
                  &lt;CardContent&gt;
                      &lt;Typography
                          className={classes.companyName}
                          color='textSecondary'
                          gutterBottom
                      &gt;
                          {crypto.CoinInfo.Name}
                      &lt;/Typography&gt;
                  &lt;/CardContent&gt;
              &lt;/Card&gt;
          &lt;/Grid&gt;
      );
  </code></pre>
  <p>However when I reorder the <code>setCrypto</code> argument to be <code> setCrypto(resCrypto.data.Data[0].CoinInfo.Name);</code> and just call the <code>{crypto}</code> state instead then it works fine. What am I doing wrong? I'd like the argument for <code>SetCrypto</code> to be <code>(resCrypto.data.Data[0])</code> instead of being too specific since I will be calling other properties from the API object.</p>
  <p>Annex 1.3 (optional) This is just the return method of the child component. I added it here for context. Basically, it just calls <code>{cryptoTicker}</code> within a grid component from material-ui.</p>
  <pre><code>return (
          &lt;Grid container direction='column'&gt;
              &lt;Grid item xs={12}&gt;
                  &lt;Ticker speed={2} mode='chain'&gt;
                      {() =&gt; &lt;&gt;{cryptoTicker}&lt;/&gt;}
                  &lt;/Ticker&gt;
              &lt;/Grid&gt;
          &lt;/Grid&gt;
      );
  }
  
  export default Financeticker;
  </code></pre>