Display which invalid type was returned

scripts/error-codes/codes.json

@@ -104,11 +104,11 @@
   "102": "EventPluginRegistry: Cannot inject two different event plugins using the same name, `%s`.",
   "103": "executeDirectDispatch(...): Invalid `event`.",
   "104": "ReactCompositeComponent: injectEnvironment() can only be called once.",
-  "105": "%s(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.",
+  "105": "%s(...): A valid React element (or null) must be returned, but you returned %s.",
   "106": "%s.state: must be set to an object or null",
   "107": "%s.getChildContext(): childContextTypes must be defined in order to use getChildContext().",
   "108": "%s.getChildContext(): key \"%s\" is not defined in childContextTypes.",
-  "109": "%s.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.",
+  "109": "%s.render(): A valid React element (or null) must be returned, but you returned %s.",
   "110": "Stateless function components cannot have refs.",
   "111": "There is no registered component for the tag %s",
   "112": "getNextDescendantID(%s, %s): Received an invalid React DOM ID.",

src/renderers/dom/__tests__/ReactDOMProduction-test.js

@@ -186,7 +186,7 @@ describe('ReactDOMProduction', () => {
       ReactDOM.render(<Component />, container);
     }).toThrowError(
       'Minified React error #109; visit ' +
-      'http://facebook.github.io/react/docs/error-decoder.html?invariant=109&args[]=Component' +
+      'http://facebook.github.io/react/docs/error-decoder.html?invariant=109&args[]=Component&args[]=array' +
       ' for the full message or use the non-minified dev environment' +
       ' for full errors and additional helpful warnings.'
     );

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

@@ -47,13 +47,24 @@ StatelessComponent.prototype.render = function() {
   return element;
 };
 
+function getTypeof(element) {
+  if (element === null) {
+    return 'null';
+  }
+  if (Array.isArray(element)) {
+    return 'array';
+  }
+  return typeof element;
+}
+
 function warnIfInvalidElement(Component, element) {
   if (__DEV__) {
     warning(
       element === null || element === false || React.isValidElement(element),
-      '%s(...): A valid React element (or null) must be returned. You may have ' +
-      'returned undefined, an array or some other invalid object.',
-      Component.displayName || Component.name || 'Component'
+      '%s(...): A valid React element (or null) must be returned, ' +
+      'but you returned %s.',
+      Component.displayName || Component.name || 'Component',
+      getTypeof(element)
     );
     warning(
       !Component.childContextTypes,
@@ -214,9 +225,10 @@ var ReactCompositeComponent = {
         inst === null ||
         inst === false ||
         React.isValidElement(inst),
-        '%s(...): A valid React element (or null) must be returned. You may have ' +
-        'returned undefined, an array or some other invalid object.',
-        Component.displayName || Component.name || 'Component'
+        '%s(...): A valid React element (or null) must be returned, ' +
+        'but you returned %s.',
+        Component.displayName || Component.name || 'Component',
+        getTypeof(renderedElement)
       );
       inst = new StatelessComponent(Component);
       this._compositeType = CompositeTypes.StatelessFunctional;
@@ -1084,9 +1096,10 @@ var ReactCompositeComponent = {
       // TODO: An `isValidNode` function would probably be more appropriate
       renderedElement === null || renderedElement === false ||
       React.isValidElement(renderedElement),
-      '%s.render(): A valid React element (or null) must be returned. You may have ' +
-        'returned undefined, an array or some other invalid object.',
-      this.getName() || 'ReactCompositeComponent'
+      '%s.render(): A valid React element (or null) must be returned, ' +
+      'but you returned %s.',
+      this.getName() || 'ReactCompositeComponent',
+      getTypeof(renderedElement)
     );
 
     return renderedElement;

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

@@ -82,8 +82,8 @@ describe('ReactEmptyComponent', () => {
     expect(function() {
       ReactTestUtils.renderIntoDocument(<Component />);
     }).toThrowError(
-      'Component.render(): A valid React element (or null) must be returned. You may ' +
-      'have returned undefined, an array or some other invalid object.'
+      'Component.render(): A valid React element (or null) must be returned, ' +
+      'but you returned undefined.'
     );
   });
 

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

@@ -129,8 +129,8 @@ describe('ReactStatelessComponent', () => {
     }).toThrow();
     expect(console.error.calls.count()).toBe(1);
     expect(console.error.calls.argsFor(0)[0]).toContain(
-      'NotAComponent(...): A valid React element (or null) must be returned. ' +
-      'You may have returned undefined, an array or some other invalid object.'
+      'NotAComponent(...): A valid React element (or null) must be returned, ' +
+      'but you returned array.'
     );
   });
 
@@ -267,8 +267,8 @@ describe('ReactStatelessComponent', () => {
     }).toThrow();  // has no method 'render'
     expect(console.error.calls.count()).toBe(1);
     expect(console.error.calls.argsFor(0)[0]).toContain(
-      'NotAComponent(...): A valid React element (or null) must be returned. You may ' +
-      'have returned undefined, an array or some other invalid object.'
+      'NotAComponent(...): A valid React element (or null) must be returned, ' +
+      'but you returned array.'
     );
   });
 });