title: cause of TypeError: Cannot read properties of undefined
body: <p>I'm trying to fetch some data from an API. The below code &quot;works&quot; when I log the results to console like <code>console.log(liveInfo.tracks)</code>, but when I try to do <code>console.log(liveInfo.tracks.current)</code> it fails with this error: <code>TypeError: Cannot read properties of undefined (reading 'current')</code>. Isn't <code>liveInfo.tracks.current</code> how one would normally access the key-value pair?</p>
  <pre><code>componentDidMount() {
   fetch('https://kchungradio.airtime.pro/api/live-info-v2')
   .then(res =&gt; res.json())
   .then(
    (result) =&gt; {
     this.setState({
      isLoaded: true,
      liveInfo: result 
     })
    }
   )
  }
  </code></pre>
  <p>The json looks more or less like this:</p>
  <pre><code>{
   &quot;station&quot;: {
    &quot;env&quot;: &quot;production&quot;,
   },
   &quot;tracks&quot;: {
    &quot;previous&quot;: {
     &quot;name&quot;: &quot;a&quot;,
     &quot;metadata&quot;: {
      &quot;id&quot;: 1,
     },
    },
    &quot;current&quot;: {
     &quot;name&quot;: &quot;b&quot;,
     &quot;metadata&quot;: {
      &quot;id&quot;: 2,
     }
    }
   }
  }
     
  </code></pre>