There are 2 things going on here, so let's separate them…
Here child1 is throwing a warning unless we add a key attribute. Is this behavior normal ? Are we doing something wrong ? What I mean is that we need to add keys to more than 500 components/children which is a hard and boring work...
- As @FakeRainBrigand mentioned, this sample code shouldn't be warning about keys. and in fact it doesn't - http://jsfiddle.net/zpao/5KSah/. The way we made this warning work is by detecting if an array was passed as an argument.
- If you have 500 children, then I have a lot of trouble believing you don't have an array in there.
Also, the warning says that the function "undefined" is throwing it
This is because React uses a property called displayName
(specified on the object passed to createClass
) to build that warning. When using JSX, we can autogenerate that property for you based on assignment. It's not always perfect but it usually works well enough. When using CoffeeScript, you may want to specify this property yourself.
/** @jsx React.DOM */
var MyComponent = React.createClass({ ... });
// becomes
var MyComponent = React.createClass({displayName: 'MyComponent', ... });