Unable to read property "_currentElement" null

Question

I am making a rails application. I got this strange error. This seems to be the problem in the reaction itself. Here is the context in which I received this error:

var ChronicBox = React.createClass({ getInitialState: function(){ return {chronics: []} }, componentWillMount: function(){ $.ajax({ // some ajax call that setsState of chronicles }); }, render: function(){ return( <div className="chronics"> <ChronicsList chronics={this.state.chronics.chronicsList} /> </div> ) } }); 

and My ChronicsList looks like this:

 var ChronicsList = React.createClass({ render:function(){ console.log(this.props.chronics); var chronics = this.props.chronics.map(function(chronic){ return( <Chronic name={chronic.name}/> ) }); return( <ul> {chronics} </ul> ) } }); 

from the logs I see the following:

 undefined can not read property .map of undefined Cannot read property '_currentElement' of null 

From them, I see that the initial state of chronics is null, so .map can not be used. Then, when the ajax call sets the State, my ChronicBox re-render and chronics contain the json info as folosw:

 { "chronicsList": [{ "id": 1, "name": "some allergy", "patient_id": 2, "created_at": "2016-02-11T19:05:33.434Z", "updated_at": "2016-02-11T19:05:33.434Z" }, { "id": 2, "name": "one more allergy", "patient_id": 2, "created_at": "2016-02-11T19:06:04.384Z", "updated_at": "2016-02-11T19:06:04.384Z" }], } 

So chronic is now defined in ChronicForm. But I do not see these logs for props.chronics inside ChronicForm, instead I got an error:

 Cannot read property '_currentElement' of null 

Is there any way to solve this problem? I saw that it was a problem in the reaction, but it was closed.

Answer 1

As you noted, this.props.chronics is null and therefore the card will not work. And so the reaction cannot display your component. When reloading data and chronics is an array, the reaction this time may call the rendering method; but when he tries to compare the current virtual DOM tree with the previous one, it does not work there because he cannot find the previous DOM tree.

The solution is to pass the array to the initial load. Thus, you will need to set the initial state of your root component:

 getInitialState: function(){ return { chronics: { chronicsList: [] } } }, 

Answer 2

I think you will get this error in the general case when some component rendering function throws an error. Fix the .map error and this error is likely to disappear.

You can fix the .map problem with the default support:

 getDefaultProps: function() { return { chronics: [] }; } 

Answer 3

I had the same error while trying to render null in a triple operation. Providing an empty line resolved the issue:

 {this.props.list.map((n) => { return <option value={n.key} key={n.key}> {n.title}{n.isDraft ? ' - (draft)' : null} </option>; }) }