score:10

Accepted answer

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: []
    }
  }
},

score:0

I had the same error when trying to render null in a ternary operation. Rendering an empty string solved the problem:

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

score:1

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: []
  };
}

Related Query

More Query from same tag