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 .backbone to facilitate the interaction of React with our legacy Backbone models / collections
• Using gulp and babel to pile my JSX files.

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./clayallsopp/react.backbone to facilitate the interaction of React with our legacy Backbone models / collections
• Using gulp and babel to pile my JSX files.

• javascript
• reactjs
• jsx

Share Improve this question Follow asked Jul 14, 2016 at 19:38 Chris W.Chris W. 39.3k3737 gold badges105105 silver badges138138 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

UPD:

For example:

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

export default SomeComponent;

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