Clarify ReactDOM's case warning for html tags (#12533)
* update warning text * update tests to match * `yarn prettier` * include note on HTML5 custom elements * dan’s copy suggestion * remove ‘letters’
Nicole Levy committed
Apr 4, 2018 at 17:21 UTC
27535e7bfcb63e8a4d65f273311e380b4ca12eff
4 files changed
+25
-11
packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+13
-3
@@ -1000,7 +1000,11 @@ describe('ReactDOMComponent', () => {
1000
1001
expect(() => {
1002
returnedValue = ReactDOMServer.renderToString(<Container />);
1003
- }).toWarnDev('<BR /> is using uppercase HTML.');
1003
+ }).toWarnDev(
1004
+ '<BR /> is using incorrect casing. ' +
1005
+ 'Use PascalCase for React components, ' +
1006
+ 'or lowercase for HTML elements.',
1007
+ );
1008
expect(returnedValue).not.toContain('</BR>');
1009
});
1010
@@ -1012,7 +1016,11 @@ describe('ReactDOMComponent', () => {
1016
1017
expect(() =>
1018
ReactTestUtils.renderIntoDocument(React.createElement('IMG')),
1015
- ).toWarnDev('<IMG /> is using uppercase HTML.');
1019
+ ).toWarnDev(
1020
+ '<IMG /> is using incorrect casing. ' +
1021
+ 'Use PascalCase for React components, ' +
1022
+ 'or lowercase for HTML elements.',
1023
+ );
1024
});
1025
1026
it('should warn on props reserved for future use', () => {
@@ -1059,7 +1067,9 @@ describe('ReactDOMComponent', () => {
1067
expect(() =>
1068
ReactTestUtils.renderIntoDocument(<hasOwnProperty />),
1069
).toWarnDev([
1062
- '<hasOwnProperty /> is using uppercase HTML',
1070
+ '<hasOwnProperty /> is using incorrect casing. ' +
1071
+ 'Use PascalCase for React components, ' +
1072
+ 'or lowercase for HTML elements.',
1073
'The tag <hasOwnProperty> is unrecognized in this browser',
1074
]);
1075
} finally {
packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js
+6
-4
@@ -602,11 +602,13 @@ describe('ReactDOMServer', () => {
602
</div>,
603
),
604
).toWarnDev([
605
- 'Warning: <inPUT /> is using uppercase HTML. Always use lowercase ' +
606
- 'HTML tags in React.',
605
+ 'Warning: <inPUT /> is using incorrect casing. ' +
606
+ 'Use PascalCase for React components, ' +
607
+ 'or lowercase for HTML elements.',
608
// linearGradient doesn't warn
608
- 'Warning: <iFrame /> is using uppercase HTML. Always use lowercase ' +
609
- 'HTML tags in React.',
609
+ 'Warning: <iFrame /> is using incorrect casing. ' +
610
+ 'Use PascalCase for React components, ' +
611
+ 'or lowercase for HTML elements.',
612
]);
613
});
614
packages/react-dom/src/client/ReactDOMFiberComponent.js
+3
-2
@@ -355,8 +355,9 @@ export function createElement(
355
// allow <SVG> or <mATH>.
356
warning(
357
isCustomComponentTag || type === type.toLowerCase(),
358
- '<%s /> is using uppercase HTML. Always use lowercase HTML tags ' +
359
- 'in React.',
358
+ '<%s /> is using incorrect casing. ' +
359
+ 'Use PascalCase for React components, ' +
360
+ 'or lowercase for HTML elements.',
361
type,
362
);
363
}
packages/react-dom/src/server/ReactPartialRenderer.js
+3
-2
@@ -955,8 +955,9 @@ class ReactDOMServerRenderer {
955
// allow <SVG> or <mATH>.
956
warning(
957
tag === element.type,
958
- '<%s /> is using uppercase HTML. Always use lowercase HTML tags ' +
959
- 'in React.',
958
+ '<%s /> is using incorrect casing. ' +
959
+ 'Use PascalCase for React components, ' +
960
+ 'or lowercase for HTML elements.',
961
element.type,
962
);
963
}