O componente React que retorna não pode ler a propriedade '__reactInternalInstance $ of null depois de tentar acessar a matriz

Aqui está o componente problemático em questão.

const UserList = React.createClass({
  render: function(){
    let theList;
    if(this.props.data){
      theList=this.props.data.map(function(user, pos){
        return (
          <div className="row user">
            <div className="col-xs-1">{pos}</div>
            <div className="col-xs-5">{user.username}</div>
            <div className="col-xs-3">{user.recent}</div>
            <div className="col-xs-3">{user.alltime}</div>
          </div>
        );
      }, this);
    } else {
     theList = <div>I don't know anymore</div>;
    }
    console.log(theList);
    return (
      theList
    );
  }
});

Sempre que tento retornar {theList}, recebo umaNão é possível ler a propriedade '__reactInternalInstance $ mincana79xce0t6kk1s5g66r' de null erro. No entanto, se eu substituir {theList} por html estático, o console.log imprime a matriz correta de objetos que eu quero. De acordo com as respostas, tentei retornar {theList} e theList, mas isso não ajudou.

Nos dois casos, o console.log imprime primeiro [], o que eu assumo é porque componentDidMount contém minha chamada ajax para obter o json do servidor e ainda não foi acionado antes da primeira renderização (). Tentei verificar se this.props.data é nulo, mas isso não ajuda.

Aqui está o componente pai, se ajudar:

const Leaderboard = React.createClass({
  getInitialState: function(){
    return ({data: [], mode: 0});
  },
  componentDidMount: function(){
    $.ajax({
      url: 'https://someurlthatreturnsjson',
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error('https://someurlthatreturnsjson', status, err.toString());
      }.bind(this)
    });
  },
  render: function(){
    return (
      <div className="leaderboard">
        <div className="row titleBar">
          <img src="http://someimage.jpg"></img>Leaderboard
        </div> 
        <HeaderBar />
        <UserList data={this.state.data}/>
      </div>
    );
  }
}); 

questionAnswers(6)

yourAnswerToTheQuestion