Add component stack info to key validation warnings

src/isomorphic/classic/element/ReactElementValidator.js

@@ -72,10 +72,11 @@ function validateExplicitKey(element, parentType) {
   warning(
     false,
     'Each child in an array or iterator should have a unique "key" prop.' +
-    '%s%s%s',
+    '%s%s%s%s',
     addenda.parentOrOwner || '',
     addenda.childOwner || '',
-    addenda.url || ''
+    addenda.url || '',
+    ReactComponentTreeDevtool.getCurrentStackAddendum(element)
   );
 }
 

src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js

@@ -84,37 +84,81 @@ describe('ReactElementValidator', function() {
     var Anonymous = React.createClass({
       displayName: undefined,
       render: function() {
-        return <div />;
+        return React.createElement('div');
       },
     });
 
     var divs = [
-      <div />,
-      <div />,
+      React.createElement('div'),
+      React.createElement('div'),
     ];
     ReactTestUtils.renderIntoDocument(<Anonymous>{divs}</Anonymous>);
 
     expect(console.error.argsForCall.length).toBe(1);
     expect(console.error.argsForCall[0][0]).toBe(
       'Warning: Each child in an array or iterator should have a unique ' +
-      '"key" prop. See https://fb.me/react-warning-keys for more information.'
+      '"key" prop. See https://fb.me/react-warning-keys for more information.\n' +
+      '    in div'
     );
   });
 
   it('warns for keys for arrays of elements with no owner info', function() {
     spyOn(console, 'error');
 
     var divs = [
-      <div />,
-      <div />,
+      React.createElement('div'),
+      React.createElement('div'),
     ];
     ReactTestUtils.renderIntoDocument(<div>{divs}</div>);
 
     expect(console.error.argsForCall.length).toBe(1);
     expect(console.error.argsForCall[0][0]).toBe(
       'Warning: Each child in an array or iterator should have a unique ' +
       '"key" prop. Check the top-level render call using <div>. See ' +
-      'https://fb.me/react-warning-keys for more information.'
+      'https://fb.me/react-warning-keys for more information.\n' +
+      '    in div'
+    );
+  });
+
+  it('warns for keys with component stack info', function() {
+    spyOn(console, 'error');
+
+    var Component = React.createClass({
+      render: function() {
+        // <div>{[<div />, <div />]}</div>
+        return React.createElement('div', null, [
+          React.createElement('div'),
+          React.createElement('div'),
+        ]);
+      },
+    });
+
+    var Parent = React.createClass({
+      render: function() {
+        return React.cloneElement(this.props.child);
+      },
+    });
+
+    var GrandParent = React.createClass({
+      render: function() {
+        // <Parent child={<Component />} />
+        return React.createElement(Parent, {
+          child: React.createElement(Component),
+        });
+      },
+    });
+
+    ReactTestUtils.renderIntoDocument(React.createElement(GrandParent));
+
+    expect(console.error.argsForCall.length).toBe(1);
+    expect(console.error.argsForCall[0][0]).toBe(
+      'Warning: Each child in an array or iterator should have a unique ' +
+      '"key" prop. Check the render method of `Component`. See ' +
+      'https://fb.me/react-warning-keys for more information.\n' +
+      '    in div (created by Component)\n' +
+      '    in Component (created by GrandParent)\n' +
+      '    in Parent (created by GrandParent)\n' +
+      '    in GrandParent'
     );
   });
 

src/renderers/shared/stack/reconciler/ReactChildReconciler.js

@@ -13,6 +13,7 @@
 
 var ReactReconciler = require('ReactReconciler');
 
+var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
 var instantiateReactComponent = require('instantiateReactComponent');
 var KeyEscapeUtils = require('KeyEscapeUtils');
 var shouldUpdateReactComponent = require('shouldUpdateReactComponent');
@@ -27,8 +28,9 @@ function instantiateChild(childInstances, child, name) {
       keyUnique,
       'flattenChildren(...): Encountered two children with the same key, ' +
       '`%s`. Child keys must be unique; when two children share a key, only ' +
-      'the first child will be used.',
-      KeyEscapeUtils.unescape(name)
+      'the first child will be used.%s',
+      KeyEscapeUtils.unescape(name),
+      ReactComponentTreeDevtool.getCurrentStackAddendum(childInstances[name])
     );
   }
   if (child != null && keyUnique) {

src/renderers/shared/stack/reconciler/__tests__/ReactChildReconciler-test.js

@@ -0,0 +1,91 @@
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @emails react-core
+ */
+
+// NOTE: We're explicitly not using JSX here. This is intended to test
+// the current stack addendum without having source location added by babel.
+
+'use strict';
+
+var React;
+var ReactTestUtils;
+
+describe('ReactChildReconciler', function() {
+  beforeEach(function() {
+    jest.resetModuleRegistry();
+
+    React = require('React');
+    ReactTestUtils = require('ReactTestUtils');
+  });
+
+  it('warns for duplicated keys', function() {
+    spyOn(console, 'error');
+
+    var Component = React.createClass({
+      render() {
+        // <div>{[<div key="1" />, <div key="1" />]}</div>
+        return React.createElement('div', null, [
+          React.createElement('div', { key: '1' }),
+          React.createElement('div', { key: '1' }),
+        ]);
+      },
+    });
+
+    ReactTestUtils.renderIntoDocument(<Component />);
+
+    expect(console.error.argsForCall.length).toBe(1);
+    expect(console.error.argsForCall[0][0]).toContain(
+      'Child keys must be unique; when two children share a key, only the first child will be used.'
+    );
+  });
+
+  it('warns for duplicated keys with component stack info', function() {
+    spyOn(console, 'error');
+
+    var Component = React.createClass({
+      render: function() {
+        // <div>{[<div key="1" />, <div key="1" />]}</div>
+        return React.createElement('div', null, [
+          React.createElement('div', { key: '1' }),
+          React.createElement('div', { key: '1' }),
+        ]);
+      },
+    });
+
+    var Parent = React.createClass({
+      render: function() {
+        return React.cloneElement(this.props.child);
+      },
+    });
+
+    var GrandParent = React.createClass({
+      render: function() {
+        // <Parent child={<Component />} />
+        return React.createElement(Parent, {
+          child: React.createElement(Component),
+        });
+      },
+    });
+
+    ReactTestUtils.renderIntoDocument(React.createElement(GrandParent));
+
+    expect(console.error.argsForCall.length).toBe(1);
+    expect(console.error.argsForCall[0][0]).toBe(
+      'Warning: flattenChildren(...): ' +
+      'Encountered two children with the same key, `1`. ' +
+      'Child keys must be unique; when two children share a key, ' +
+      'only the first child will be used.\n' +
+      '    in Unknown\n' + // cuz we are using `ReactTestUtils.renderIntoDocument`
+      '    in Component (created by GrandParent)\n' +
+      '    in Parent (created by GrandParent)\n' +
+      '    in GrandParent'
+    );
+  });
+});

src/renderers/shared/stack/reconciler/__tests__/ReactMultiChild-test.js

@@ -148,5 +148,60 @@ describe('ReactMultiChild', function() {
       expect(mockMount.mock.calls.length).toBe(2);
       expect(mockUnmount.mock.calls.length).toBe(1);
     });
+
+    it('should warn for duplicated keys with component stack info', function() {
+      // NOTE: We're explicitly not using JSX here. This is intended to test
+      // the current stack addendum without having source location added by babel.
+      spyOn(console, 'error');
+
+      var container = document.createElement('div');
+
+      var WrapperComponent = React.createClass({
+        render: function() {
+          // <div>{this.props.children}</div>
+          return React.createElement('div', null, this.props.children);
+        },
+      });
+
+      var Parent = React.createClass({
+        render: function() {
+          // <div><WrapperComponent>{this.props.children}</WrapperComponent></div>
+          return React.createElement(
+            'div',
+            null,
+            React.createElement(WrapperComponent, null, this.props.children)
+          );
+        },
+      });
+
+      ReactDOM.render(
+        // <Parent>{[<div key="1"/>]}</Parent>,
+        React.createElement(Parent, null, [
+          React.createElement('div', { key: '1' }),
+        ]),
+        container
+      );
+
+      ReactDOM.render(
+        // <Parent>{[<div key="1"/>, <div key="1"/>]}</Parent>,
+        React.createElement(Parent, null, [
+          React.createElement('div', { key: '1' }),
+          React.createElement('div', { key: '1' }),
+        ]),
+        container
+      );
+
+      expect(console.error.argsForCall.length).toBe(1);
+      expect(console.error.argsForCall[0][0]).toBe(
+        'Warning: flattenChildren(...): ' +
+        'Encountered two children with the same key, `1`. ' +
+        'Child keys must be unique; when two children share a key, ' +
+        'only the first child will be used.\n' +
+        '    in div\n' +
+        '    in WrapperComponent (created by Parent)\n' +
+        '    in div (created by Parent)\n' +
+        '    in Parent'
+      );
+    });
   });
 });

src/shared/utils/flattenChildren.js

@@ -11,6 +11,7 @@
 
 'use strict';
 
+var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
 var KeyEscapeUtils = require('KeyEscapeUtils');
 var traverseAllChildren = require('traverseAllChildren');
 var warning = require('warning');
@@ -29,8 +30,9 @@ function flattenSingleChildIntoContext(traverseContext, child, name) {
       keyUnique,
       'flattenChildren(...): Encountered two children with the same key, ' +
       '`%s`. Child keys must be unique; when two children share a key, only ' +
-      'the first child will be used.',
-      KeyEscapeUtils.unescape(name)
+      'the first child will be used.%s',
+      KeyEscapeUtils.unescape(name),
+      ReactComponentTreeDevtool.getCurrentStackAddendum(result[name])
     );
   }
   if (keyUnique && child != null) {