Improve warning for old element objects
Fixes #4996.
Ben Alpert committed
Sep 29, 2015 at 18:02 UTC
d561949711b513a357b9e1782d001d3044e1211d
2 files changed
+22
-4
src/addons/__tests__/ReactFragment-test.js
+11
@@ -60,6 +60,17 @@ describe('ReactFragment', function() {
60
);
61
});
62
63
+ it('should throw if a plain object looks like an old element', function() {
64
+ var oldEl = {_isReactElement: true, type: 'span', props: {}};
65
+ var container = document.createElement('div');
66
+ expect(() => ReactDOM.render(<div>{oldEl}</div>, container)).toThrow(
67
+ 'Invariant Violation: Objects are not valid as a React child (found: ' +
68
+ 'object with keys {_isReactElement, type, props}). It looks like ' +
69
+ 'you\'re using an element created by a different version of React. ' +
70
+ 'Make sure to use only one copy of React.'
71
+ );
72
+ });
73
+
74
it('warns for numeric keys on objects as children', function() {
75
spyOn(console, 'error');
76
src/shared/utils/traverseAllChildren.js
+11
-4
@@ -181,19 +181,26 @@ function traverseAllChildrenImpl(
181
} else if (type === 'object') {
182
var addendum = '';
183
if (__DEV__) {
184
+ addendum =
185
+ ' If you meant to render a collection of children, use an array ' +
186
+ 'instead or wrap the object using createFragment(object) from the ' +
187
+ 'React add-ons.';
188
+ if (children._isReactElement) {
189
+ addendum =
190
+ ' It looks like you\'re using an element created by a different ' +
191
+ 'version of React. Make sure to use only one copy of React.';
192
+ }
193
if (ReactCurrentOwner.current) {
194
var name = ReactCurrentOwner.current.getName();
195
if (name) {
187
- addendum = ' Check the render method of `' + name + '`.';
196
+ addendum += ' Check the render method of `' + name + '`.';
197
}
198
}
199
}
200
var childrenString = String(children);
201
invariant(
202
false,
194
- 'Objects are not valid as a React child (found: %s). If you meant to ' +
195
- 'render a collection of children, use an array instead or wrap the ' +
196
- 'object using createFragment(object) from the React add-ons.%s',
203
+ 'Objects are not valid as a React child (found: %s).%s',
204
childrenString === '[object Object]' ?
205
'object with keys {' + Object.keys(children).join(', ') + '}' :
206
childrenString,