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:
React.createClass()
(i.e., not the ES6 way)React.createBackboneClass()
from https://github.com/clayallsopp/react.backbone to facilitate the interaction of React with our legacy Backbone models / collectionsgulp
and babel
to compile my JSX files.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;
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>;
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With