title: Accessing nested JSON data in React Component
body: <p>Hi i am just starting to learn react as a side project.</p>
  
  <p>Im using an express backend to call an api that returns some JSON to my component. I cant seem to access the nested array to iterate over and display.</p>
  
  <pre><code>import React, { Component } from 'react';
  import '../../app.css';
  
  export class Table extends Component {
  constructor(props) {
      super(props);
      this.state = {
          jsonItems: [],
          isLoaded: false
      }
  }
  
  componentWillMount() {
      this.renderMyData();
  }
  
  renderMyData() {
      fetch('/api/nfl')
          .then(res =&gt; res.json())
          .then(json =&gt; {
              this.setState({
                  jsonItems: JSON.parse(json),
                  isLoaded: true
              })
          })
  }
  
  render() {
      console.log(this.state.jsonItems.fullgameschedule);
      return (
          &lt;table&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Test 1&lt;/th&gt;
                      &lt;th&gt;Test 2&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
  
              &lt;/tbody&gt;
          &lt;/table&gt;
      )
  }
  }
  </code></pre>
  
  <p>Json output:</p>
  
  <pre><code>{
  "fullgameschedule": {
      "lastUpdatedOn": "2018-08-24 2:55:41 PM",
      "gameentry": [
       {
      "id": "43306",
      "week": "1",
      "scheduleStatus": "Normal",
      "originalDate": null,
      "originalTime": null,
      "delayedOrPostponedReason": null,
      "date": "2017-09-07",
      "time": "8:30PM",
      "awayTeam": {
        "ID": "73",
        "City": "Kansas City",
        "Name": "Chiefs",
        "Abbreviation": "KC"
      },
      "homeTeam": {
        "ID": "50",
        "City": "New England",
        "Name": "Patriots",
        "Abbreviation": "NE"
      },
      "location": "Gillette Stadium"
        }
      ]
    }
  }
  </code></pre>
  
  <p>jsonItems gets populated (as shown in my react dev tools). but i cant seem to iterate over the json array "gameentry"</p>
  
  <p>I can print out {this.state.jsonItems.fullgameschedule} , but i cant access it any further for example {this.state.jsonItems.fullgameschedule.gameentry} or gameentry[0] without the error message:</p>
  
  <blockquote>
    <p>Cannot read property 'gameentry' of undefined</p>
  </blockquote>
  
  <p>Which at first i thought was because of js being asynchronous that it was loading the component before it rendered, so i changed componentDidMount() to componentWillMount() and that should handle that. How can i access the array list and iterate over to display it to the component? or just a general point in the right direction.</p>
  
  <p>EDIT: How im getting the data.</p>
  
  <pre><code>    var options = {
          url: url,
          auth: {
              user : 'xxx',
              password : 'xxx',
          }
      }
      app.get('/api/nfl', function (req, res) {
          request(options, function (err, response, body){
              if (err) {
                  console.log(err);
              }
              res.send(JSON.stringify(response.body));
          })
      });
  </code></pre>