Skip to content

Commit 03de849

Browse files
vcarlvcarl
authored
Make uncontrolled -> controlled warning clearer (#17070)
* Make uncontrolled -> controlled warning clearer * Update phrasing, mirror for opposite direction * Remove unused substitution * Update warning tests * Literally got these backwards, womp womp * Rerere-fix tests
1 parent ddc4b65 commit 03de849

File tree

4 files changed

+65
-56
lines changed

4 files changed

+65
-56
lines changed

‎packages/react-dom/src/__tests__/DOMPropertyOperations-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ describe('DOMPropertyOperations', () => {
184184
container,
185185
),
186186
).toErrorDev(
187-
'A component is changing a controlled input of type text to be uncontrolled',
187+
'A component is changing a controlled input to be uncontrolled',
188188
);
189189
if (disableInputAttributeSyncing) {
190190
expect(container.firstChild.hasAttribute('value')).toBe(false);

‎packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -178,9 +178,9 @@ describe('ReactDOMComponentTree', () => {
178178
const component = <Controlled />;
179179
const instance = ReactDOM.render(component, container);
180180
expect(() => simulateInput(instance.a, finishValue)).toErrorDev(
181-
'Warning: A component is changing an uncontrolled input of ' +
182-
'type text to be controlled. Input elements should not ' +
183-
'switch from uncontrolled to controlled (or vice versa). ' +
181+
'Warning: A component is changing an uncontrolled input to be controlled. ' +
182+
'This is likely caused by the value changing from undefined to ' +
183+
'a defined value, which should not happen. ' +
184184
'Decide between using a controlled or uncontrolled input ' +
185185
'element for the lifetime of the component. More info: ' +
186186
'https://fb.me/react-controlled-components',

‎packages/react-dom/src/__tests__/ReactDOMInput-test.js

Lines changed: 55 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -479,8 +479,7 @@ describe('ReactDOMInput', () => {
479479
expect(() =>
480480
ReactDOM.render(<input type="text" defaultValue="1" />, container),
481481
).toErrorDev(
482-
'A component is changing a controlled input of type ' +
483-
'text to be uncontrolled.',
482+
'A component is changing a controlled input to be uncontrolled.',
484483
);
485484
expect(node.value).toBe('0');
486485
});
@@ -858,8 +857,7 @@ describe('ReactDOMInput', () => {
858857
container,
859858
),
860859
).toErrorDev(
861-
'A component is changing a controlled input of type ' +
862-
'submit to be uncontrolled.',
860+
'A component is changing a controlled input to be uncontrolled.',
863861
);
864862

865863
const node = container.firstChild;
@@ -878,8 +876,7 @@ describe('ReactDOMInput', () => {
878876
container,
879877
),
880878
).toErrorDev(
881-
'A component is changing a controlled input of type ' +
882-
'reset to be uncontrolled.',
879+
'A component is changing a controlled input to be uncontrolled.',
883880
);
884881

885882
const node = container.firstChild;
@@ -1272,8 +1269,9 @@ describe('ReactDOMInput', () => {
12721269
);
12731270
ReactDOM.render(stub, container);
12741271
expect(() => ReactDOM.render(<input type="text" />, container)).toErrorDev(
1275-
'Warning: A component is changing a controlled input of type text to be uncontrolled. ' +
1276-
'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
1272+
'Warning: A component is changing a controlled input to be uncontrolled. ' +
1273+
'This is likely caused by the value changing from a defined to ' +
1274+
'undefined, which should not happen. ' +
12771275
'Decide between using a controlled or uncontrolled input ' +
12781276
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
12791277
' in input (at **)',
@@ -1290,8 +1288,9 @@ describe('ReactDOMInput', () => {
12901288
).toErrorDev([
12911289
'`value` prop on `input` should not be null. ' +
12921290
'Consider using an empty string to clear the component or `undefined` for uncontrolled components',
1293-
'Warning: A component is changing a controlled input of type text to be uncontrolled. ' +
1294-
'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
1291+
'Warning: A component is changing a controlled input to be uncontrolled. ' +
1292+
'This is likely caused by the value changing from a defined to ' +
1293+
'undefined, which should not happen. ' +
12951294
'Decide between using a controlled or uncontrolled input ' +
12961295
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
12971296
' in input (at **)',
@@ -1309,8 +1308,9 @@ describe('ReactDOMInput', () => {
13091308
container,
13101309
),
13111310
).toErrorDev(
1312-
'Warning: A component is changing a controlled input of type text to be uncontrolled. ' +
1313-
'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
1311+
'Warning: A component is changing a controlled input to be uncontrolled. ' +
1312+
'This is likely caused by the value changing from a defined to ' +
1313+
'undefined, which should not happen. ' +
13141314
'Decide between using a controlled or uncontrolled input ' +
13151315
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
13161316
' in input (at **)',
@@ -1323,8 +1323,9 @@ describe('ReactDOMInput', () => {
13231323
expect(() =>
13241324
ReactDOM.render(<input type="text" value="controlled" />, container),
13251325
).toErrorDev(
1326-
'Warning: A component is changing an uncontrolled input of type text to be controlled. ' +
1327-
'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
1326+
'Warning: A component is changing an uncontrolled input to be controlled. ' +
1327+
'This is likely caused by the value changing from undefined to ' +
1328+
'a defined value, which should not happen. ' +
13281329
'Decide between using a controlled or uncontrolled input ' +
13291330
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
13301331
' in input (at **)',
@@ -1340,8 +1341,9 @@ describe('ReactDOMInput', () => {
13401341
expect(() =>
13411342
ReactDOM.render(<input type="text" value="controlled" />, container),
13421343
).toErrorDev(
1343-
'Warning: A component is changing an uncontrolled input of type text to be controlled. ' +
1344-
'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
1344+
'Warning: A component is changing an uncontrolled input to be controlled. ' +
1345+
'This is likely caused by the value changing from undefined to ' +
1346+
'a defined value, which should not happen. ' +
13451347
'Decide between using a controlled or uncontrolled input ' +
13461348
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
13471349
' in input (at **)',
@@ -1356,8 +1358,9 @@ describe('ReactDOMInput', () => {
13561358
expect(() =>
13571359
ReactDOM.render(<input type="checkbox" />, container),
13581360
).toErrorDev(
1359-
'Warning: A component is changing a controlled input of type checkbox to be uncontrolled. ' +
1360-
'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
1361+
'Warning: A component is changing a controlled input to be uncontrolled. ' +
1362+
'This is likely caused by the value changing from a defined to ' +
1363+
'undefined, which should not happen. ' +
13611364
'Decide between using a controlled or uncontrolled input ' +
13621365
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
13631366
' in input (at **)',
@@ -1372,8 +1375,9 @@ describe('ReactDOMInput', () => {
13721375
expect(() =>
13731376
ReactDOM.render(<input type="checkbox" checked={null} />, container),
13741377
).toErrorDev(
1375-
'Warning: A component is changing a controlled input of type checkbox to be uncontrolled. ' +
1376-
'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
1378+
'Warning: A component is changing a controlled input to be uncontrolled. ' +
1379+
'This is likely caused by the value changing from a defined to ' +
1380+
'undefined, which should not happen. ' +
13771381
'Decide between using a controlled or uncontrolled input ' +
13781382
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
13791383
' in input (at **)',
@@ -1391,8 +1395,9 @@ describe('ReactDOMInput', () => {
13911395
container,
13921396
),
13931397
).toErrorDev(
1394-
'Warning: A component is changing a controlled input of type checkbox to be uncontrolled. ' +
1395-
'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
1398+
'Warning: A component is changing a controlled input to be uncontrolled. ' +
1399+
'This is likely caused by the value changing from a defined to ' +
1400+
'undefined, which should not happen. ' +
13961401
'Decide between using a controlled or uncontrolled input ' +
13971402
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
13981403
' in input (at **)',
@@ -1405,8 +1410,9 @@ describe('ReactDOMInput', () => {
14051410
expect(() =>
14061411
ReactDOM.render(<input type="checkbox" checked={true} />, container),
14071412
).toErrorDev(
1408-
'Warning: A component is changing an uncontrolled input of type checkbox to be controlled. ' +
1409-
'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
1413+
'Warning: A component is changing an uncontrolled input to be controlled. ' +
1414+
'This is likely caused by the value changing from undefined to ' +
1415+
'a defined value, which should not happen. ' +
14101416
'Decide between using a controlled or uncontrolled input ' +
14111417
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
14121418
' in input (at **)',
@@ -1419,8 +1425,9 @@ describe('ReactDOMInput', () => {
14191425
expect(() =>
14201426
ReactDOM.render(<input type="checkbox" checked={true} />, container),
14211427
).toErrorDev(
1422-
'Warning: A component is changing an uncontrolled input of type checkbox to be controlled. ' +
1423-
'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
1428+
'Warning: A component is changing an uncontrolled input to be controlled. ' +
1429+
'This is likely caused by the value changing from undefined to ' +
1430+
'a defined value, which should not happen. ' +
14241431
'Decide between using a controlled or uncontrolled input ' +
14251432
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
14261433
' in input (at **)',
@@ -1431,8 +1438,9 @@ describe('ReactDOMInput', () => {
14311438
const stub = <input type="radio" checked={true} onChange={emptyFunction} />;
14321439
ReactDOM.render(stub, container);
14331440
expect(() => ReactDOM.render(<input type="radio" />, container)).toErrorDev(
1434-
'Warning: A component is changing a controlled input of type radio to be uncontrolled. ' +
1435-
'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
1441+
'Warning: A component is changing a controlled input to be uncontrolled. ' +
1442+
'This is likely caused by the value changing from a defined to ' +
1443+
'undefined, which should not happen. ' +
14361444
'Decide between using a controlled or uncontrolled input ' +
14371445
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
14381446
' in input (at **)',
@@ -1445,8 +1453,9 @@ describe('ReactDOMInput', () => {
14451453
expect(() =>
14461454
ReactDOM.render(<input type="radio" checked={null} />, container),
14471455
).toErrorDev(
1448-
'Warning: A component is changing a controlled input of type radio to be uncontrolled. ' +
1449-
'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
1456+
'Warning: A component is changing a controlled input to be uncontrolled. ' +
1457+
'This is likely caused by the value changing from a defined to ' +
1458+
'undefined, which should not happen. ' +
14501459
'Decide between using a controlled or uncontrolled input ' +
14511460
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
14521461
' in input (at **)',
@@ -1459,8 +1468,9 @@ describe('ReactDOMInput', () => {
14591468
expect(() =>
14601469
ReactDOM.render(<input type="radio" defaultChecked={true} />, container),
14611470
).toErrorDev(
1462-
'Warning: A component is changing a controlled input of type radio to be uncontrolled. ' +
1463-
'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
1471+
'Warning: A component is changing a controlled input to be uncontrolled. ' +
1472+
'This is likely caused by the value changing from a defined to ' +
1473+
'undefined, which should not happen. ' +
14641474
'Decide between using a controlled or uncontrolled input ' +
14651475
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
14661476
' in input (at **)',
@@ -1473,8 +1483,9 @@ describe('ReactDOMInput', () => {
14731483
expect(() =>
14741484
ReactDOM.render(<input type="radio" checked={true} />, container),
14751485
).toErrorDev(
1476-
'Warning: A component is changing an uncontrolled input of type radio to be controlled. ' +
1477-
'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
1486+
'Warning: A component is changing an uncontrolled input to be controlled. ' +
1487+
'This is likely caused by the value changing from undefined to ' +
1488+
'a defined value, which should not happen. ' +
14781489
'Decide between using a controlled or uncontrolled input ' +
14791490
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
14801491
' in input (at **)',
@@ -1487,8 +1498,9 @@ describe('ReactDOMInput', () => {
14871498
expect(() =>
14881499
ReactDOM.render(<input type="radio" checked={true} />, container),
14891500
).toErrorDev(
1490-
'Warning: A component is changing an uncontrolled input of type radio to be controlled. ' +
1491-
'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
1501+
'Warning: A component is changing an uncontrolled input to be controlled. ' +
1502+
'This is likely caused by the value changing from undefined to ' +
1503+
'a defined value, which should not happen. ' +
14921504
'Decide between using a controlled or uncontrolled input ' +
14931505
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
14941506
' in input (at **)',
@@ -1539,8 +1551,9 @@ describe('ReactDOMInput', () => {
15391551
expect(() =>
15401552
ReactDOM.render(<input type="radio" value="value" />, container),
15411553
).toErrorDev(
1542-
'Warning: A component is changing a controlled input of type radio to be uncontrolled. ' +
1543-
'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
1554+
'Warning: A component is changing a controlled input to be uncontrolled. ' +
1555+
'This is likely caused by the value changing from a defined to ' +
1556+
'undefined, which should not happen. ' +
15441557
'Decide between using a controlled or uncontrolled input ' +
15451558
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
15461559
' in input (at **)',
@@ -1837,8 +1850,7 @@ describe('ReactDOMInput', () => {
18371850

18381851
it('reverts the value attribute to the initial value', () => {
18391852
expect(renderInputWithStringThenWithUndefined).toErrorDev(
1840-
'Input elements should not switch from controlled to ' +
1841-
'uncontrolled (or vice versa).',
1853+
'A component is changing a controlled input to be uncontrolled.',
18421854
);
18431855
if (disableInputAttributeSyncing) {
18441856
expect(input.getAttribute('value')).toBe(null);
@@ -1849,8 +1861,7 @@ describe('ReactDOMInput', () => {
18491861

18501862
it('preserves the value property', () => {
18511863
expect(renderInputWithStringThenWithUndefined).toErrorDev(
1852-
'Input elements should not switch from controlled to ' +
1853-
'uncontrolled (or vice versa).',
1864+
'A component is changing a controlled input to be uncontrolled.',
18541865
);
18551866
expect(input.value).toBe('latest');
18561867
});
@@ -1889,8 +1900,7 @@ describe('ReactDOMInput', () => {
18891900
'`value` prop on `input` should not be null. ' +
18901901
'Consider using an empty string to clear the component ' +
18911902
'or `undefined` for uncontrolled components.',
1892-
'Input elements should not switch from controlled ' +
1893-
'to uncontrolled (or vice versa).',
1903+
'A component is changing a controlled input to be uncontrolled.',
18941904
]);
18951905
if (disableInputAttributeSyncing) {
18961906
expect(input.hasAttribute('value')).toBe(false);
@@ -1904,8 +1914,7 @@ describe('ReactDOMInput', () => {
19041914
'`value` prop on `input` should not be null. ' +
19051915
'Consider using an empty string to clear the component ' +
19061916
'or `undefined` for uncontrolled components.',
1907-
'Input elements should not switch from controlled ' +
1908-
'to uncontrolled (or vice versa).',
1917+
'A component is changing a controlled input to be uncontrolled.',
19091918
]);
19101919
expect(input.value).toBe('latest');
19111920
});

‎packages/react-dom/src/client/ReactDOMInput.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -143,11 +143,11 @@ export function updateWrapper(element: Element, props: Object) {
143143
!didWarnUncontrolledToControlled
144144
) {
145145
console.error(
146-
'A component is changing an uncontrolled input of type %s to be controlled. ' +
147-
'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
146+
'A component is changing an uncontrolled input to be controlled. ' +
147+
'This is likely caused by the value changing from undefined to ' +
148+
'a defined value, which should not happen. ' +
148149
'Decide between using a controlled or uncontrolled input ' +
149150
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components',
150-
props.type,
151151
);
152152
didWarnUncontrolledToControlled = true;
153153
}
@@ -157,11 +157,11 @@ export function updateWrapper(element: Element, props: Object) {
157157
!didWarnControlledToUncontrolled
158158
) {
159159
console.error(
160-
'A component is changing a controlled input of type %s to be uncontrolled. ' +
161-
'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
160+
'A component is changing a controlled input to be uncontrolled. ' +
161+
'This is likely caused by the value changing from a defined to ' +
162+
'undefined, which should not happen. ' +
162163
'Decide between using a controlled or uncontrolled input ' +
163164
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components',
164-
props.type,
165165
);
166166
didWarnControlledToUncontrolled = true;
167167
}

0 commit comments

Comments
 (0)