diff --git a/src/addons/__tests__/ReactFragment-test.js b/src/addons/__tests__/ReactFragment-test.js index 237e10692d..f0f3297c75 100644 --- a/src/addons/__tests__/ReactFragment-test.js +++ b/src/addons/__tests__/ReactFragment-test.js @@ -60,6 +60,17 @@ describe('ReactFragment', function() { ); }); + it('should throw if a plain object looks like an old element', function() { + var oldEl = {_isReactElement: true, type: 'span', props: {}}; + var container = document.createElement('div'); + expect(() => ReactDOM.render(
{oldEl}
, container)).toThrow( + 'Invariant Violation: Objects are not valid as a React child (found: ' + + 'object with keys {_isReactElement, type, props}). It looks like ' + + 'you\'re using an element created by a different version of React. ' + + 'Make sure to use only one copy of React.' + ); + }); + it('warns for numeric keys on objects as children', function() { spyOn(console, 'error'); diff --git a/src/shared/utils/traverseAllChildren.js b/src/shared/utils/traverseAllChildren.js index 6733735867..488a092d28 100644 --- a/src/shared/utils/traverseAllChildren.js +++ b/src/shared/utils/traverseAllChildren.js @@ -181,19 +181,26 @@ function traverseAllChildrenImpl( } else if (type === 'object') { var addendum = ''; if (__DEV__) { + addendum = + ' If you meant to render a collection of children, use an array ' + + 'instead or wrap the object using createFragment(object) from the ' + + 'React add-ons.'; + if (children._isReactElement) { + addendum = + ' It looks like you\'re using an element created by a different ' + + 'version of React. Make sure to use only one copy of React.'; + } if (ReactCurrentOwner.current) { var name = ReactCurrentOwner.current.getName(); if (name) { - addendum = ' Check the render method of `' + name + '`.'; + addendum += ' Check the render method of `' + name + '`.'; } } } var childrenString = String(children); invariant( false, - 'Objects are not valid as a React child (found: %s). If you meant to ' + - 'render a collection of children, use an array instead or wrap the ' + - 'object using createFragment(object) from the React add-ons.%s', + 'Objects are not valid as a React child (found: %s).%s', childrenString === '[object Object]' ? 'object with keys {' + Object.keys(children).join(', ') + '}' : childrenString,