warning.js:45 Warning: flattenChildren(...): Encountered two children with the same key, `.1:$..`

Question

I'm receiving a ton of these errors, one after the other with different keys attached to the warning message. Is there a way to find out where they are coming from based on the id key?

Answer 1

It's usually a pain to find out where you've made the key mistake, and in React 15, data-reactid is never even rendered to the DOM, making it harder. In normal versions, just inspect the DOM and start looking for elements that have data-reactid=.1:$.... .

Anyway, the error comes from setting the key prop manually somewhere, so start looking for that in your components. This is usually an issue if you have an array, and render components for each value of this array:

var things = [1,2,3,4].map(function(value, index){
  // This will cause Warning: flattenChildren... because
  // every div will be given the same React ID
  return (
    <div key="FIXED_KEY">{value}</div>
  );
})

Now, in a case like this, you have to set the key manually, just make sure that the key is unique for each rendered component in the same loop.