React ambiguous error messaging: "Check the render method of `Constructor`."

Question

I'm using React on the client side to render my application's views.

When I view error reporting in my browser console I sometimes see errors with Check the render method of 'Constructor' instead of the proper name of the class where the error is occurring.

e.g., I'll see a message like:

Warning: Each child in an array or iterator should have a unique "key" prop.
Check the render method of `Constructor`. See https://<fb.me>/react-warning-keys for more information.

Why is my class's name appearing as Constructor? How do I get React to properly display the class's name.

---

Other details:

• Currently I create classes using React.createClass() (i.e., not the ES6 way)
• Some of my classes are created using React.createBackboneClass() from https://github.com/clayallsopp/react.backbone to facilitate the interaction of React with our legacy Backbone models / collections
• Using gulp and babel to compile my JSX files.

Solution 1

It happened because your components created with createClass don't have proper displayName. Write display name to each component in your application, and you will see normal message.

UPD:

For example:

const SomeComponent = React.createClass({
    displayName: 'SomeComponent',
    ...
    render() {
        ...
    }
});

export default SomeComponent;

Solution 2

From the React Docs:

displayName string displayName

The displayName string is used in debugging messages. JSX sets this value automatically;

Try this:

var Hello = React.createClass({

  displayName: 'Hello World', // here

  render: function() {
    console.log(this.displayName);
    return <div>Hello {this.props.name}</div>;
  }
});