ReactJS: this.props.data.map is not a function

Question

I am trying to get the data from a .json file and displaying the results through a view. Below is the scoreboard.json file.

{
\"subject\":\"scoreboard\",
\"c         


        

Answer 1

As pointed out by azium my data is an object and not an array like my results were expecting.

To get the "game" array inside the "games" field I set the state as the following:

this.setState({data: data.data.games.game});

To get the other fields I simply created a new state and passed it through a prop i.e. modified_date:

this.state.date = data.data.games.modified_date

The warning: Each child in an array or iterator should have a unique "key" prop. was fixed by adding a "key" property inside the .map method:

render: function() {
    var gameDate = this.props.data.map(function(data) {
        return (
            <h1 key={data.location} >{data.location} </h1>
        );
    });