Add owner to void element children warning
Ben Alpert committed
Jun 12, 2015 at 16:28 UTC
99b89ff1b33489357202a8fb5a707782424f3491
2 files changed
+22
-2
src/renderers/dom/shared/ReactDOMComponent.js
+6
-2
@@ -107,8 +107,12 @@ function assertValidProps(component, props) {
107
warning(
108
props.children == null && props.dangerouslySetInnerHTML == null,
109
'%s is a void element tag and must not have `children` or ' +
110
- 'use `props.dangerouslySetInnerHTML`.',
111
- component._tag
110
+ 'use `props.dangerouslySetInnerHTML`.%s',
111
+ component._tag,
112
+ component._currentElement._owner ?
113
+ ' Check the render method of ' +
114
+ component._currentElement._owner.getName() + '.' :
115
+ ''
116
);
117
}
118
}
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+16
@@ -618,6 +618,22 @@ describe('ReactDOMComponent', function() {
618
expect(SimpleEventPlugin.didPutListener.mock.calls.length).toBe(2);
619
expect(SimpleEventPlugin.willDeleteListener.mock.calls.length).toBe(1);
620
});
621
+
622
+ it('should warn for children on void elements', function() {
623
+ spyOn(console, 'error');
624
+ var X = React.createClass({
625
+ render: function() {
626
+ return <input>moo</input>;
627
+ },
628
+ });
629
+ var container = document.createElement('div');
630
+ React.render(<X />, container);
631
+ expect(console.error.argsForCall.length).toBe(1);
632
+ expect(console.error.argsForCall[0][0]).toBe(
633
+ 'Warning: input is a void element tag and must not have `children` ' +
634
+ 'or use `props.dangerouslySetInnerHTML`. Check the render method of X.'
635
+ );
636
+ });
637
});
638
639
describe('updateComponent', function() {