35
rated 0 times
[
37]
[
2]
/ answers: 1 / hits: 138920
/ 10 Years ago, wed, february 4, 2015, 12:00:00
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 ?
More From » arrays
