title: ReactJS: this.props.data.map is not a function
body: <p>I am trying to get the data from a .json file and displaying the results through a view. Below is the scoreboard.json file.</p>
  
  <pre><code>{
  "subject":"scoreboard",
  "copyright":"Copyright 2015",
  "data":
     "games":{
       "next_day_date":"2015-07-22",
       "modified_date":"2015-08-04T07:34:50Z",
       "month":"07",
       "year":"2015",
       "game":[
          {
             "game_type":"R",
             "double_header_sw":"N",
             "location":"Some City, State",
          }, 
          {
             "game_type":"R",
             "double_header_sw":"N",
             "location":"Another City, Another State"
          }
       ]
     }
  </code></pre>
  
  <p>I only want the "data" field and not the "subject" or "copyright" fields and am able to do so through the ajax request below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> getInitialState: function() {
    return {data: []};
   },
   componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
       console.log(data.data);
        this.setState({data: data.data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
   },</code></pre>
  </div>
  </div>
  </p>
  
  <p>I pass the state down to the receiving file but, when I try to call it I receive a <code>TypeError: this.props.data.map is not a function</code> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> render: function() {
    var gameDate = this.props.data.map(function(data) {
     return (
      &lt;h1&gt;{data.modified_date} &lt;/h1&gt;
     );
    });</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to be able to get all the information that is in the "data" field of the scoreboard.json eventually (i.e. data.games.game[] array). The .map function Does not seem to work for this either.</p>
  
  <p>How would I get the "data" fields (more specifically the <code>modified_date</code>) in the .map function?</p>
  
  <p>Edit: I can log the modified_date by calling data.games.modified_date but, when trying to set the state of data: <code>this.state.data = data.games.game</code> I receive a new warning: <code>Each child in an array or iterator should have a unique "key" prop. Check the render method of "GameDate"</code></p>