React update state

gistfile1.js

<div class="row">
    <div class="col-md-3" id="playerContainer"></div>
    <div class="col-md-6" id="playerDetailContainer"></div>
</div>

<script type="text/jsx">

var loadData = function (self) {

    $.ajax({
        url: self.props.url,
        dataType: 'json',
        success: function(data) {

            self.setState({ data: data });
        }.bind(self),
        error: function(xhr, status, err) {

            console.error(self.props.url, status, err.toString());
        }.bind(self)
    });
};

var internals = {};
internals.registerPlayerDetail = function (container) {

    internals.playerDetail = container;
}

var PlayerDetailContainer = React.createClass({
    getInitialState: function () {
        return {
            player: {
                name: '',
                team: '',
                positions: '',
            }
        };
    },
    componentDidMount: function () {

        internals.registerPlayerDetail(this);
    },
    render: function () {

        return (
            <div className="playerDetail">
                <PlayerDetail name={this.state.player.name} team={this.state.player.team} positions={this.state.player.positions} />
            </div>
        )
    }
});

var PlayerDetail = React.createClass({
    render: function () {

        return (
            <h2>{this.props.name}</h2>
        )
    }
});

var PlayerList = React.createClass({
    getInitialState: function() {

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

        loadData(this);
    },
    render: function () {

        return (
            <div className="playerList">
                <h1>Players</h1>
                <Players data={this.state.data} />
            </div>
        );
    }
});

var Players = React.createClass({
    render: function () {

        var players = this.props.data.map(function (player) {

            return (
                <Player name={player.name} id={player.id} team={player.team} positions={player.positions} photo={player.photo} status={player.status} />
            );
        });

        return (
            <div className="players">
            {players}
            </div>
        );
    }
});

var Player = React.createClass({
    onClick: function (event) {

        internals.playerDetail.setState({ player: this.props });
        console.log(':: CLICK ::', this.props.id)
        console.log(':: DETAIL ::', internals.playerDetail)
    },
    render: function () {

        return (
            <div className="player" onClick={this.onClick}>
                {this.props.name}
            </div>
        )
    }
});

React.render(
    <PlayerList url='/players' />,
    document.getElementById('playerContainer')
);

React.render(
    <PlayerDetailContainer />,
    document.getElementById('playerDetailContainer')
);

</script>