title: .map is not a function React
body: <p>I'm working on a small app that will pull some data from a JSON file (game scores). Currently I am getting the error, <code>games.map is not a function</code>. I saw another post on Stack Overflow that was similar, but the answer was that the initial state was not an array, but I have set my initial state to be an array, so I don't believe it applies. Below is my React JS can anyone point me in the right direction? Could it have something to do with the JSON structure? You can find the json file <a href="http://pinetar-app.com/src/client/app/mlb-scoreboard.json" rel="nofollow">here</a>. Thank you kindly!</p>
  
  <pre><code>class SingleGame extends React.Component{
    render(){
      return(
        &lt;div&gt;{this.props.homeTeam}&lt;/div&gt;
      );
    }
  }
  
  class GameBox extends React.Component{
  
    constructor() {
      super();
  
      this.state = {
        games: []
      };
    }
  
    componentWillMount() {
      this._getGameScores();
    }
  
    componentDidMount() {
      this._timer = setInterval(() =&gt; this._getGameScores(), 45000);
    }
  
    componentWillUnmount() {
      clearInterval(this._timer);
    }
  
    _getGameScores(){
      jQuery.ajax({
        method: 'GET',
        url: 'http://pinetar-app.com/src/client/app/mlb-scoreboard.json',
        success: function(games){
          this.setState({games: games.data});
        }.bind(this)
      });
    }
  
    _mapGameScores(){
      const games = this.state.games;
  
      return games.map((games) =&gt; {
        return(
          &lt;SingleGame homeTeam={games.game.home_team_name} /&gt;
        );
      });
    }
  
    render() {
      const gameList = this._mapGameScores();
      return(
        &lt;div&gt;
        {gameList}
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(
    &lt;GameBox /&gt;, document.getElementById('pinetar')
  );
  </code></pre>