diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index 2df33293fae3f..0e2986a1f5d34 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -1000,7 +1000,11 @@ describe('ReactDOMComponent', () => {
expect(() => {
returnedValue = ReactDOMServer.renderToString();
- }).toWarnDev('
is using uppercase HTML.');
+ }).toWarnDev(
+ '
is using incorrect casing. ' +
+ 'Use PascalCase for React components, ' +
+ 'or lowercase for HTML elements.',
+ );
expect(returnedValue).not.toContain('');
});
@@ -1012,7 +1016,11 @@ describe('ReactDOMComponent', () => {
expect(() =>
ReactTestUtils.renderIntoDocument(React.createElement('IMG')),
- ).toWarnDev(' is using uppercase HTML.');
+ ).toWarnDev(
+ ' is using incorrect casing. ' +
+ 'Use PascalCase for React components, ' +
+ 'or lowercase for HTML elements.',
+ );
});
it('should warn on props reserved for future use', () => {
@@ -1059,7 +1067,9 @@ describe('ReactDOMComponent', () => {
expect(() =>
ReactTestUtils.renderIntoDocument(),
).toWarnDev([
- ' is using uppercase HTML',
+ ' is using incorrect casing. ' +
+ 'Use PascalCase for React components, ' +
+ 'or lowercase for HTML elements.',
'The tag is unrecognized in this browser',
]);
} finally {
diff --git a/packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js b/packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js
index 45fca606342f4..05eb32ba037a8 100644
--- a/packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactServerRendering-test.internal.js
@@ -602,11 +602,13 @@ describe('ReactDOMServer', () => {
,
),
).toWarnDev([
- 'Warning: is using uppercase HTML. Always use lowercase ' +
- 'HTML tags in React.',
+ 'Warning: is using incorrect casing. ' +
+ 'Use PascalCase for React components, ' +
+ 'or lowercase for HTML elements.',
// linearGradient doesn't warn
- 'Warning: is using uppercase HTML. Always use lowercase ' +
- 'HTML tags in React.',
+ 'Warning: is using incorrect casing. ' +
+ 'Use PascalCase for React components, ' +
+ 'or lowercase for HTML elements.',
]);
});
diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js
index 733432cd26e7d..ceb20873c2af2 100644
--- a/packages/react-dom/src/client/ReactDOMFiberComponent.js
+++ b/packages/react-dom/src/client/ReactDOMFiberComponent.js
@@ -355,8 +355,9 @@ export function createElement(
// allow