The Mini John The Mini John - 5 months ago 52
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() {
url: '/example.json',
dataType: 'json',
success: function(data) {
this.setState({data: data});
error: function(xhr, status, err) {
console.error('#GET Error', status, err.toString());

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

componentDidMount: function() {

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

Now I need a List Component to Render the Players:

var PlayerList = React.createClass({

render: function() {

// This prints the correct data

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

{ {
return <li key={player}>{player}</li>

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 {
   return <li key={player.championId}>{player.summonerName}</li>
   // -------------------^^^^^^^^^^^---------^^^^^^^^^^^^^^


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download