Usage of .name|.displayName to identify stateless functional components

docs/docs/05-reusable-components.md

@@ -248,7 +248,7 @@ ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
 ```
 
 This simplified component API is intended for components that are pure functions of their props. These components must not retain internal state, do not have backing instances, and do not have the component lifecycle methods. They are pure functional transforms of their input, with zero boilerplate.
-However, you may still specify `.propTypes` and `.defaultProps` by setting them as properties on the function, just as you would set them on an ES6 class.
+However, you may still specify `.propTypes`, `.defaultProps`, and `.displayName` by setting them as properties on the function, just as you would set them on an ES6 class. `.displayName` or `.name` may be used as the name of the component within debug messages if it's a non-empty string. `.displayName` would take precedence over `.name` when calculating the component name.
 
 > NOTE:
 >

src/isomorphic/classic/element/ReactElement.js

@@ -16,6 +16,7 @@ var ReactCurrentOwner = require('ReactCurrentOwner');
 var assign = require('Object.assign');
 var warning = require('warning');
 var canDefineProperty = require('canDefineProperty');
+var getComponentName = require('getComponentName');
 
 // The Symbol used to tag the ReactElement type. If there is no native Symbol
 // nor polyfill, then a plain number is used for performance.
@@ -184,7 +185,7 @@ ReactElement.createElement = function(type, config, children) {
                   'in `undefined` being returned. If you need to access the same ' +
                   'value within the child component, you should pass it as a different ' +
                   'prop. (https://fb.me/react-special-props)',
-                'displayName' in type ? type.displayName: 'Element'
+                getComponentName(type) || 'Element'
               );
             }
             return undefined;

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

@@ -57,35 +57,105 @@ describe('ReactElement', function() {
     expect(element.props).toEqual(expectation);
   });
 
-  it('should warn when `key` is being accessed', function() {
+  /**
+   * Check the warning about accessing props.key for correct component name.
+   *
+   * @param {object} testOpts Options for the test.
+   *   testOpts.Component {ReactClass|function} ReactComponent class or
+   *   stateless function.
+   *
+   *   testOpts.expectedName {string} The name that the component is expected to
+   *   be identified by in the warning message.
+   *
+   * @return {void}
+   */
+  function testKeyAccess(testOpts) {
+    /**
+     * Generate the expected warning message for accessing props.key.
+     *
+     * @param {object} opts Options.
+     *   opts.name {string} Component name.
+     *
+     * @return {string}
+     */
+    function getWarning(opts) {
+      return `
+        ${opts.name}: ${'`key`'} is not a prop. Trying to access it will result
+        in ${'`undefined`'} being returned. If you need to access the same
+        value within the child component, you should pass it as a different
+        prop. (https://fb.me/react-special-props)
+      `.replace(/\n */g, ' ').trim();
+    }
+
     spyOn(console, 'error');
+    var {Component, expectedName} = testOpts;
     var container = document.createElement('div');
-    var Child = React.createClass({
-      render: function() {
-        return <div> {this.props.key} </div>;
-      },
-    });
-    var Parent = React.createClass({
-      render: function() {
-        return (
-          <div>
-            <Child key="0" />
-            <Child key="1" />
-            <Child key="2" />
-          </div>
-        );
-      },
-    });
+
+    function render(props) {
+      return <div> {props.key} </div>;
+    }
+
     expect(console.error.calls.length).toBe(0);
-    ReactDOM.render(<Parent />, container);
+    ReactDOM.render(<Component key="0" render={render} />, container);
     expect(console.error.calls.length).toBe(1);
-    expect(console.error.argsForCall[0][0]).toContain(
-      'Child: `key` is not a prop. Trying to access it will result ' +
-      'in `undefined` being returned. If you need to access the same ' +
-      'value within the child component, you should pass it as a different ' +
-      'prop. (https://fb.me/react-special-props)'
-    );
-  });
+    expect(console.error.argsForCall[0][0]).toContain(getWarning({
+      name: expectedName,
+    }));
+  }
+
+  it(
+    'should warn and identify Component class by `.displayName` when `props.key` is being accessed',
+
+    function() {
+      var Something = React.createClass({
+        render: function() {
+          return this.props.render(this.props);
+        },
+      });
+
+      // Test that warning message about accessing props.key identifies
+      // Component as expectedName.
+      return testKeyAccess({
+        Component: Something,
+        expectedName: Something.displayName,
+      });
+    }
+  );
+
+  it(
+    'should warn and identify stateless function by `.name` when `props.key` is being accessed',
+
+    function() {
+      function Something(props) {
+        return props.render(props);
+      }
+
+      // Test that warning message about accessing props.key identifies
+      // Component as expectedName.
+      return testKeyAccess({
+        Component: Something,
+        expectedName: Something.name,
+      });
+    }
+  );
+
+  it(
+    'should warn and identify stateless function by `.displayName` when `props.key` is being accessed',
+
+    function() {
+      function Something(props) {
+        return props.render(props);
+      }
+      Something.displayName = Something.name + 'with displayName';
+
+      // Test that warning message about accessing props.key identifies
+      // Component as expectedName.
+      return testKeyAccess({
+        Component: Something,
+        expectedName: Something.displayName,
+      });
+    }
+  );
 
   it('should warn when `ref` is being accessed', function() {
     spyOn(console, 'error');

src/shared/utils/__tests__/getComponentName-test.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var getComponentName = require('getComponentName');
+var React = require('React');
+
+describe('getComponentName', function() {
+  it('should prefer `displayName`', function() {
+    var displayName = 'Else';
+
+    var Something = function Something() {};
+    Something.displayName = displayName;
+
+    expect(getComponentName(Something)).toBe(displayName);
+
+    Something = React.createClass({
+      render: function() {},
+      displayName: displayName,
+    });
+
+    expect(getComponentName(Something)).toBe(displayName);
+  });
+
+  it('should fall back on `name`', function() {
+    function Something() {}
+
+    expect(getComponentName(Something)).toBe(Something.name);
+  });
+});

src/shared/utils/getComponentName.js

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ *
+ * @providesModule getComponentName
+ */
+
+'use strict';
+
+/**
+ * Returns the component name, if any.
+ *
+ * This is to provide consistent logic for choosing the name: prefer
+ * `displayName` and fall back on `name`.
+ *
+ * @param {ReactComponent} component
+ * @return {?string} Name, if any.
+ */
+function getComponentName(component) {
+  return component && (component.displayName || component.name);
+}
+
+module.exports = getComponentName;