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
Carl Vitullo committed
Apr 7, 2020 at 18:19 UTC
03de849af03996b7477420c97de7741ce1214149
4 files changed
+65
-56
packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
+1
-1
@@ -184,7 +184,7 @@ describe('DOMPropertyOperations', () => {
184
container,
185
),
186
).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',
188
);
189
if (disableInputAttributeSyncing) {
190
expect(container.firstChild.hasAttribute('value')).toBe(false);
packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js
+3
-3
@@ -178,9 +178,9 @@ describe('ReactDOMComponentTree', () => {
178
const component = <Controlled />;
179
const instance = ReactDOM.render(component, container);
180
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. ' +
184
'Decide between using a controlled or uncontrolled input ' +
185
'element for the lifetime of the component. More info: ' +
186
'https://fb.me/react-controlled-components',
packages/react-dom/src/__tests__/ReactDOMInput-test.js
+55
-46
@@ -479,8 +479,7 @@ describe('ReactDOMInput', () => {
479
expect(() =>
480
ReactDOM.render(<input type="text" defaultValue="1" />, container),
481
).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.',
483
);
484
expect(node.value).toBe('0');
485
});
@@ -858,8 +857,7 @@ describe('ReactDOMInput', () => {
857
container,
858
),
859
).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.',
861
);
862
863
const node = container.firstChild;
@@ -878,8 +876,7 @@ describe('ReactDOMInput', () => {
876
container,
877
),
878
).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.',
880
);
881
882
const node = container.firstChild;
@@ -1272,8 +1269,9 @@ describe('ReactDOMInput', () => {
1269
);
1270
ReactDOM.render(stub, container);
1271
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. ' +
1275
'Decide between using a controlled or uncontrolled input ' +
1276
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
1277
' in input (at **)',
@@ -1290,8 +1288,9 @@ describe('ReactDOMInput', () => {
1288
).toErrorDev([
1289
'`value` prop on `input` should not be null. ' +
1290
'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. ' +
1294
'Decide between using a controlled or uncontrolled input ' +
1295
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
1296
' in input (at **)',
@@ -1309,8 +1308,9 @@ describe('ReactDOMInput', () => {
1308
container,
1309
),
1310
).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. ' +
1314
'Decide between using a controlled or uncontrolled input ' +
1315
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
1316
' in input (at **)',
@@ -1323,8 +1323,9 @@ describe('ReactDOMInput', () => {
1323
expect(() =>
1324
ReactDOM.render(<input type="text" value="controlled" />, container),
1325
).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. ' +
1329
'Decide between using a controlled or uncontrolled input ' +
1330
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
1331
' in input (at **)',
@@ -1340,8 +1341,9 @@ describe('ReactDOMInput', () => {
1341
expect(() =>
1342
ReactDOM.render(<input type="text" value="controlled" />, container),
1343
).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. ' +
1347
'Decide between using a controlled or uncontrolled input ' +
1348
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
1349
' in input (at **)',
@@ -1356,8 +1358,9 @@ describe('ReactDOMInput', () => {
1358
expect(() =>
1359
ReactDOM.render(<input type="checkbox" />, container),
1360
).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. ' +
1364
'Decide between using a controlled or uncontrolled input ' +
1365
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
1366
' in input (at **)',
@@ -1372,8 +1375,9 @@ describe('ReactDOMInput', () => {
1375
expect(() =>
1376
ReactDOM.render(<input type="checkbox" checked={null} />, container),
1377
).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. ' +
1381
'Decide between using a controlled or uncontrolled input ' +
1382
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
1383
' in input (at **)',
@@ -1391,8 +1395,9 @@ describe('ReactDOMInput', () => {
1395
container,
1396
),
1397
).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. ' +
1401
'Decide between using a controlled or uncontrolled input ' +
1402
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
1403
' in input (at **)',
@@ -1405,8 +1410,9 @@ describe('ReactDOMInput', () => {
1410
expect(() =>
1411
ReactDOM.render(<input type="checkbox" checked={true} />, container),
1412
).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. ' +
1416
'Decide between using a controlled or uncontrolled input ' +
1417
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
1418
' in input (at **)',
@@ -1419,8 +1425,9 @@ describe('ReactDOMInput', () => {
1425
expect(() =>
1426
ReactDOM.render(<input type="checkbox" checked={true} />, container),
1427
).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. ' +
1431
'Decide between using a controlled or uncontrolled input ' +
1432
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
1433
' in input (at **)',
@@ -1431,8 +1438,9 @@ describe('ReactDOMInput', () => {
1438
const stub = <input type="radio" checked={true} onChange={emptyFunction} />;
1439
ReactDOM.render(stub, container);
1440
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. ' +
1444
'Decide between using a controlled or uncontrolled input ' +
1445
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
1446
' in input (at **)',
@@ -1445,8 +1453,9 @@ describe('ReactDOMInput', () => {
1453
expect(() =>
1454
ReactDOM.render(<input type="radio" checked={null} />, container),
1455
).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. ' +
1459
'Decide between using a controlled or uncontrolled input ' +
1460
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
1461
' in input (at **)',
@@ -1459,8 +1468,9 @@ describe('ReactDOMInput', () => {
1468
expect(() =>
1469
ReactDOM.render(<input type="radio" defaultChecked={true} />, container),
1470
).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. ' +
1474
'Decide between using a controlled or uncontrolled input ' +
1475
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
1476
' in input (at **)',
@@ -1473,8 +1483,9 @@ describe('ReactDOMInput', () => {
1483
expect(() =>
1484
ReactDOM.render(<input type="radio" checked={true} />, container),
1485
).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. ' +
1489
'Decide between using a controlled or uncontrolled input ' +
1490
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
1491
' in input (at **)',
@@ -1487,8 +1498,9 @@ describe('ReactDOMInput', () => {
1498
expect(() =>
1499
ReactDOM.render(<input type="radio" checked={true} />, container),
1500
).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. ' +
1504
'Decide between using a controlled or uncontrolled input ' +
1505
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
1506
' in input (at **)',
@@ -1539,8 +1551,9 @@ describe('ReactDOMInput', () => {
1551
expect(() =>
1552
ReactDOM.render(<input type="radio" value="value" />, container),
1553
).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. ' +
1557
'Decide between using a controlled or uncontrolled input ' +
1558
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components\n' +
1559
' in input (at **)',
@@ -1837,8 +1850,7 @@ describe('ReactDOMInput', () => {
1850
1851
it('reverts the value attribute to the initial value', () => {
1852
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.',
1854
);
1855
if (disableInputAttributeSyncing) {
1856
expect(input.getAttribute('value')).toBe(null);
@@ -1849,8 +1861,7 @@ describe('ReactDOMInput', () => {
1861
1862
it('preserves the value property', () => {
1863
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.',
1865
);
1866
expect(input.value).toBe('latest');
1867
});
@@ -1889,8 +1900,7 @@ describe('ReactDOMInput', () => {
1900
'`value` prop on `input` should not be null. ' +
1901
'Consider using an empty string to clear the component ' +
1902
'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.',
1904
]);
1905
if (disableInputAttributeSyncing) {
1906
expect(input.hasAttribute('value')).toBe(false);
@@ -1904,8 +1914,7 @@ describe('ReactDOMInput', () => {
1914
'`value` prop on `input` should not be null. ' +
1915
'Consider using an empty string to clear the component ' +
1916
'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.',
1918
]);
1919
expect(input.value).toBe('latest');
1920
});
packages/react-dom/src/client/ReactDOMInput.js
+6
-6
@@ -143,11 +143,11 @@ export function updateWrapper(element: Element, props: Object) {
143
!didWarnUncontrolledToControlled
144
) {
145
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. ' +
149
'Decide between using a controlled or uncontrolled input ' +
150
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components',
150
- props.type,
151
);
152
didWarnUncontrolledToControlled = true;
153
}
@@ -157,11 +157,11 @@ export function updateWrapper(element: Element, props: Object) {
157
!didWarnControlledToUncontrolled
158
) {
159
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. ' +
163
'Decide between using a controlled or uncontrolled input ' +
164
'element for the lifetime of the component. More info: https://fb.me/react-controlled-components',
164
- props.type,
165
);
166
didWarnControlledToUncontrolled = true;
167
}