Cannot read property '_currentElement' of null

Question

I am doing react-rails app. I got this strange error. Seems like it is the problem in react itself. Here is the context in which i got 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:

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 logs i see this:

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

From these i see that initially state chronics is null, therefore .map cant be used. Then when ajax call setsState my ChronicBox re-renders and chronics contain json information 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 chronics are defined now in ChronicForm. But I do not see those logs for props.chronics inside ChronicForm instead i got error:

Cannot read property '_currentElement' of null

Is there any way to resolve this problem? I saw it was an issue in react, but it was closed.

Answer 1

As you noted, this.props.chronics is null, and so map won't work. And so, react is unable to render your component. When data reloads and chronics is an array, react is able to call the render method successfully this time; but when it tries to compare the current virtual DOM tree to the previous one, it fails there as it is unable to find the previous DOM tree.

The solution is to pass an array on the initial load. So, you would have to set the initial state of your root component to:

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

Answer 2

I think you get this error generically when any component's render function throws an error. Fix the .map error and this error will likely disappear.

You can fix the .map problem with a default prop:

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