React.js create loop through Array

Question

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          


        

Answer 1

As @Alexander solves, the issue is one of async data load - you're rendering immediately and you will not have participants loaded until the async ajax call resolves and populates data with participants.

The alternative to the solution they provided would be to prevent render until participants exist, something like this:

    render: function() {
        if (!this.props.data.participants) {
            return null;
        }
        return (
            

            // I'm the Player List {this.props.data}
            // 
            {
                this.props.data.participants.map(function(player) {
                    return 
{player}
                })
            }
            
        );
    }