Returning the returned component cannot read the '__reactInternalInstance $ null property after trying to access the array

Question

Here is the problematic component in question.

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 ); } }); 

Whenever I try to return {theList}, I get I can not read the '__reactInternalInstance $ mincana79xce0t6kk1s5g66r' property of null . However, if I replace {theList} with static html, console.log will output the correct array of objects that I want. According to the answers, I tried to return both {theList} and theList, but that did not help.

In both cases, console.log first outputs [], which I assume because componentDidMount contains my ajax call to get json from the server and has not quit before the first render () yet. I tried checking this.props.data is null, but this does not help.

Here is the parent component if it helps:

 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> ); } }); 

Answer 1

So, there were interesting problems, but you were so close. Big, reacting, you should always return one element of the top level (for example, div). So your variable theList was actually an array of theList . You cannot return this directly. But you can return it if it is wrapped in one parent div.

 const mockData = [ { username: 'bob', recent: 'seven', alltime: 123, }, { username: 'sally mae', recent: 'seven', alltime: 133999, }, ]; var $ = { ajax(opt) { setTimeout(() => { opt.success(mockData); }, 200); } } const UserList = React.createClass({ render: function(){ let theList; if (this.props.data && this.props.data.length) { theList = this.props.data.map(function(user, pos){ return ( <div key={user.username} className="row user"> <div className="col">{pos}</div> <div className="col">{user.username}</div> <div className="col">{user.recent}</div> <div className="col">{user.alltime}</div> </div> ); }); } else { theList = <div>There is NO data</div>; } return <div>{theList}</div>; } }); 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"> <UserList data={this.state.data}/> </div> ); } }); ReactDOM.render( <Leaderboard/>, document.getElementById('container') ); 

 .col { width: 200px; float: left; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://facebook.imtqy.com/react/js/jsfiddle-integration-babel.js"></script> <div id="container"> <!-- This element contents will be replaced with your component. --> </div> 

Explain the violin a bit. Don’t worry about the weird looking var $ stuff, I'm just cheating on the jQuery ajax method, so I can return some fake data after 200ms.

Also, for me, jsfiddle gives me a "bad config" message when I run it, but I close the message and there is a result. I don’t know what that means.

Answer 2

 return ( {theList} ) 

it should be

 return theList 

because you are not inside JSX at this point. What you do there will be interpreted as

 return { theList: theList } 

Syntax for abbreviated ES6 properties.

Answer 3

The error also occurs due to access to a nested state that does not exist:

I do not have enough reputation for comments, so adding an answer to future help - I ran into this problem for another reason. Apparently, the error is triggered from an earlier error, discarding the internal state of the reaction, but the error somehow gets there. github issue # 8091

In my case, I tried to access a state property that was not there after moving the property to the redux repository:

 // original state state: { files: [], user: {}, } // ... within render function: <h1> Welcome {this.state.user.username} </h1> 

I subsequently transferred the user to save and delete a line from state // changed state state: {files: [],} // ... inside the rendering function (forgot to change):

 <h1> Welcome {this.state.user.username} </h1> 

And this gave rise to a mysterious mistake. Everything was cleaned up by changing the render to call this.props.user.username.

Answer 4

There is a small problem with the if statement:

 if(this.props.data !== []){ 

it should be:

 if(this.props.data){ 

this.props.data is null if the ajax call returns null. alternatively, the code may be more complex.

 const data = this.props.data; if(data && data.constructor === Array && data.length > 0) { 

Answer 5

Not sure if that is how you want to do it, but it works for me.

change

 const UserList = React.createClass({ render: function() { if(this.props.data){ return this.props.data.map(function(user, pos){ return ( <li> className="row user"> <span>{pos}</span> <span>{user.username}</span> <span>{user.recent}</span> <span>{user.alltime}</span> </li> ); }); } else { return <li>I don't know anymore</li>; } } }); 

Answer 6

I ran into this error when I provided a stateless component and decided to remove the action-root element (wrapping div) after rendering using basic manipulations with dom.

Conclusion: keep this in mind; better not do this.