In this gist I'm trying to get the PlayerForm to receive the new players state as it gets updated in the MatchList component.

matchmaking.js.jsx

// Example eliminations.json to generate match data
// [
//   {
//     "id":223,
//     "competition_id":2,
//     "home_id":2,
//     "away_id":9,
//     "round":1,
//     "home_name":"nicolas_badila",
//     "away_name":"thedarkship4"
//   }
// ]
//Example remaining.json which is a list of players that haven't been eliminated
// [
//   {"value":10,"name":"mcsack12"},
//   {"value":8,"name":"licensetest2"}
// ]

/** @jsx React.DOM */
$(window).ready(function(){
  var PlayerForm = React.createClass(
  {
    render: function()
    {
      return(
        <select>
        <option>Select a Player</option>
        {this.props.players.map(function (player)
          {
            <option value={player.value}>{player.name}</option>
          }
        )}
        </select>
      )
    }

  })

  var MatchList = React.createClass(
  {
    getInitialState: function() {
      return {players: []};
    },
    loadPlayersFromServer: function() {
      $.ajax({
        url: "2/remaining.json",
        dataType: 'json',
        success: function(players) {
          this.setState({players: players});
        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    },
    componentDidMount: function() {
      this.loadPlayersFromServer();
    },
    render: function() {
      var players = this.state.players;
      var roundNode = this.props.data.map(function (round) {
        return (
          <div>
            <strong>Round</strong>
            {
              round.map(function(match){
              return(
                <div>
                  {
                    match.home_name ?
                      match.home_name
                    :
                      <PlayerForm players={players}/>
                  }
                  <span> vs. </span>
                  {
                    match.away_name ?
                      match.away_name
                    :
                      <PlayerForm players={players}/>
                  }
                </div>
              )
              })
            }
          </div>
        );
      });
      return (
        <div className="elimList">
          {roundNode}
        </div>
      );
    }
  });

  var MatchWizard = React.createClass(
    {
      getInitialState: function() {
        return {data: []};
      },
      loadMatchesFromServer: function() {
        $.ajax({
          url: this.props.url,
          dataType: 'json',
          success: function(data) {
            this.setState({data: data});
          }.bind(this),
          error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
          }.bind(this)
        });
      },
      componentDidMount: function() {
        this.loadMatchesFromServer();
      },
      render: function() {
        return (
          <div className="commentBox">
            <h1>Matchinations</h1>
            <MatchList data={this.state.data} />
          </div>
        );
      }
    }
  );

  React.renderComponent(
     <MatchWizard url="2/eliminations.json" />,
     document.getElementById('eliminations')
  );

});