Add more information to 'Input elements must be either controlled or uncontrolled' warning
Boris Yankov committed
Mar 25, 2016 at 16:36 UTC
1018e50a1a3c082431772faee259cf4a0bade509
2 files changed
+12
-2
src/renderers/dom/client/wrappers/ReactDOMInput.js
+10
-2
@@ -92,6 +92,8 @@ var ReactDOMInput = {
92
inst._currentElement._owner
93
);
94
95
+ var owner = inst._currentElement._owner;
96
+
97
if (props.valueLink !== undefined && !didWarnValueLink) {
98
warning(
99
false,
@@ -113,11 +115,14 @@ var ReactDOMInput = {
115
) {
116
warning(
117
false,
118
+ '%s contains an input of type %s with both checked and defaultChecked props. ' +
119
'Input elements must be either controlled or uncontrolled ' +
120
'(specify either the checked prop, or the defaultChecked prop, but not ' +
121
'both). Decide between using a controlled or uncontrolled input ' +
122
'element and remove one of these props. More info: ' +
120
- 'https://fb.me/react-controlled-components'
123
+ 'https://fb.me/react-controlled-components',
124
+ owner && owner.getName() || 'A component',
125
+ props.type
126
);
127
didWarnCheckedDefaultChecked = true;
128
}
@@ -128,11 +133,14 @@ var ReactDOMInput = {
133
) {
134
warning(
135
false,
136
+ '%s contains an input of type %s with both value and defaultValue props. ' +
137
'Input elements must be either controlled or uncontrolled ' +
138
'(specify either the value prop, or the defaultValue prop, but not ' +
139
'both). Decide between using a controlled or uncontrolled input ' +
140
'element and remove one of these props. More info: ' +
135
- 'https://fb.me/react-controlled-components'
141
+ 'https://fb.me/react-controlled-components',
142
+ owner && owner.getName() || 'A component',
143
+ props.type
144
);
145
didWarnValueDefaultValue = true;
146
}
src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
+2
@@ -422,6 +422,7 @@ describe('ReactDOMInput', function() {
422
<input type="radio" checked={true} defaultChecked={true} readOnly={true} />
423
);
424
expect(console.error.argsForCall[0][0]).toContain(
425
+ 'A component contains an input of type radio with both checked and defaultChecked props. ' +
426
'Input elements must be either controlled or uncontrolled ' +
427
'(specify either the checked prop, or the defaultChecked prop, but not ' +
428
'both). Decide between using a controlled or uncontrolled input ' +
@@ -440,6 +441,7 @@ describe('ReactDOMInput', function() {
441
<input type="text" value="foo" defaultValue="bar" readOnly={true} />
442
);
443
expect(console.error.argsForCall[0][0]).toContain(
444
+ 'A component contains an input of type text with both value and defaultValue props. ' +
445
'Input elements must be either controlled or uncontrolled ' +
446
'(specify either the value prop, or the defaultValue prop, but not ' +
447
'both). Decide between using a controlled or uncontrolled input ' +