The Mini John The Mini John - 24 days ago 8
Ajax Question

React.js create loop through Array

I'm trying to display a Table of 10 Players. I get the data from via ajax and pass it as props to my Child.

var CurrentGame = React.createClass({

// get game info
loadGameData: function() {
$.ajax({
url: '/example.json',
dataType: 'json',
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error('#GET Error', status, err.toString());
}.bind(this)
});
},

getInitialState: function(){
return {data: []};
},

componentDidMount: function() {
this.loadGameData();
},

render: function() {
return (
<div className="CurrentGame">
<h1> Current Game Information</h1>
<PlayerList data={this.state.data}/>
</div>
);
}
});


Now I need a List Component to Render the Players:

var PlayerList = React.createClass({


render: function() {

// This prints the correct data
console.log(this.props.data);

return (
<ul className="PlayerList">
// I'm the Player List {this.props.data}
// <Player author="The Mini John" />

{
this.props.data.participants.map(function(player) {
return <li key={player}>{player}</li>
})
}
</ul>
)
}
});


Which gives me a
Uncaught TypeError: Cannot read property 'map' of undefined
.

I'm kind of unsure what is happening, my console log displays the correct data but somehow I can't access it in the return.

What am I missing ?

Answer Source

In CurrentGame component you need to change initial state because you are trying use loop for participants but this property is undefined that's why you get error.,

getInitialState: function(){
    return {
       data: {
          participants: [] 
       }
    };
},

also, as player in .map is Object you should get properties from it

this.props.data.participants.map(function(player) {
   return <li key={player.championId}>{player.summonerName}</li>
   // -------------------^^^^^^^^^^^---------^^^^^^^^^^^^^^
})

Example