Display error when trying to create an element of type boolean. Fixes #3478
Grant Timmerman committed
Mar 26, 2015 at 01:21 UTC
3c9ea7279513cd6e009e15b4b6ed9eac6b9ad02a
3 files changed
+34
-25
src/classic/element/ReactElementValidator.js
+6
-5
@@ -362,7 +362,8 @@ function checkAndWarnForMutatedProps(element) {
362
* @param {ReactElement} element
363
*/
364
function validatePropTypes(element) {
365
- if (element.type == null) {
365
+ if (element.type == null || !(typeof element.type === 'string' ||
366
+ typeof element.type === 'function')) {
367
// This has already warned. Don't throw.
368
return;
369
}
@@ -399,10 +400,10 @@ var ReactElementValidator = {
400
// We warn in this case but don't throw. We expect the element creation to
401
// succeed and there will likely be errors in render.
402
warning(
402
- type != null,
403
- 'React.createElement: type should not be null or undefined. It should ' +
404
- 'be a string (for DOM elements) or a ReactClass (for composite ' +
405
- 'components).%s',
403
+ type != null && (typeof type === 'string' || typeof type === 'function'),
404
+ 'React.createElement: type should not be null, undefined, or boolean. ' +
405
+ 'It should be a string (for DOM elements) or a ReactClass ' +
406
+ '(for composite components).%s',
407
getDeclarationErrorAddendum()
408
);
409
src/classic/element/__tests__/ReactElementValidator-test.js
+19
-13
@@ -258,26 +258,32 @@ describe('ReactElementValidator', function() {
258
);
259
});
260
261
- it('gives a helpful error when passing null or undefined', function() {
261
+ it('gives a helpful error when passing null, undefined, or boolean', () => {
262
spyOn(console, 'error');
263
React.createElement(undefined);
264
React.createElement(null);
265
- expect(console.error.calls.length).toBe(2);
265
+ React.createElement(true);
266
+ expect(console.error.calls.length).toBe(3);
267
expect(console.error.calls[0].args[0]).toBe(
267
- 'Warning: React.createElement: type should not be null or undefined. ' +
268
- 'It should be a string (for DOM elements) or a ReactClass (for ' +
269
- 'composite components).'
268
+ 'Warning: React.createElement: type should not be null, undefined, ' +
269
+ 'or boolean. It should be a string (for DOM elements) or a ReactClass ' +
270
+ '(for composite components).'
271
);
272
expect(console.error.calls[1].args[0]).toBe(
272
- 'Warning: React.createElement: type should not be null or undefined. ' +
273
- 'It should be a string (for DOM elements) or a ReactClass (for ' +
274
- 'composite components).'
273
+ 'Warning: React.createElement: type should not be null, undefined, ' +
274
+ 'or boolean. It should be a string (for DOM elements) or a ReactClass ' +
275
+ '(for composite components).'
276
+ );
277
+ expect(console.error.calls[2].args[0]).toBe(
278
+ 'Warning: React.createElement: type should not be null, undefined, ' +
279
+ 'or boolean. It should be a string (for DOM elements) or a ReactClass ' +
280
+ '(for composite components).'
281
);
282
React.createElement('div');
277
- expect(console.error.calls.length).toBe(2);
283
+ expect(console.error.calls.length).toBe(3);
284
});
285
280
- it('includes the owner name when passing null or undefined', function() {
286
+ it('includes the owner name when passing null, undefined, or boolean', () => {
287
spyOn(console, 'error');
288
var ParentComp = React.createClass({
289
render: function() {
@@ -289,9 +295,9 @@ describe('ReactElementValidator', function() {
295
}).toThrow();
296
expect(console.error.calls.length).toBe(2);
297
expect(console.error.calls[0].args[0]).toBe(
292
- 'Warning: React.createElement: type should not be null or undefined. ' +
293
- 'It should be a string (for DOM elements) or a ReactClass (for ' +
294
- 'composite components). Check the render method of `ParentComp`.'
298
+ 'Warning: React.createElement: type should not be null, undefined, ' +
299
+ 'or boolean. It should be a string (for DOM elements) or a ReactClass ' +
300
+ '(for composite components). Check the render method of `ParentComp`.'
301
);
302
expect(console.error.calls[1].args[0]).toBe(
303
'Warning: Only functions or strings can be mounted as React components.'
src/modern/element/__tests__/ReactJSXElementValidator-test.js
+9
-7
@@ -208,24 +208,26 @@ describe('ReactJSXElementValidator', function() {
208
);
209
});
210
211
- it('gives a helpful error when passing null or undefined', function() {
211
+ it('gives a helpful error when passing null, undefined, or boolean', () => {
212
var Undefined = undefined;
213
var Null = null;
214
var Div = 'div';
215
+ var True = true;
216
spyOn(console, 'error');
217
<Undefined />;
218
<Null />;
218
- expect(console.error.calls.length).toBe(2);
219
+ <True />;
220
+ expect(console.error.calls.length).toBe(3);
221
expect(console.error.calls[0].args[0]).toContain(
220
- 'type should not be null or undefined. It should be a string (for ' +
221
- 'DOM elements) or a ReactClass (for composite components).'
222
+ 'type should not be null, undefined, or boolean. It should be a ' +
223
+ 'string (for DOM elements) or a ReactClass (for composite components).'
224
);
225
expect(console.error.calls[1].args[0]).toContain(
224
- 'type should not be null or undefined. It should be a string (for ' +
225
- 'DOM elements) or a ReactClass (for composite components).'
226
+ 'type should not be null, undefined, or boolean. It should be a ' +
227
+ 'string (for DOM elements) or a ReactClass (for composite components).'
228
);
229
<Div />;
228
- expect(console.error.calls.length).toBe(2);
230
+ expect(console.error.calls.length).toBe(3);
231
});
232
233
it('should check default prop values', function() {