diff --git a/packages/react/src/ReactElementValidator.js b/packages/react/src/ReactElementValidator.js
index b67f52fe9f785..1cc7bcf475990 100644
--- a/packages/react/src/ReactElementValidator.js
+++ b/packages/react/src/ReactElementValidator.js
@@ -21,7 +21,6 @@ import {
REACT_FRAGMENT_TYPE,
REACT_ELEMENT_TYPE,
} from 'shared/ReactSymbols';
-import {warnAboutSpreadingKeyToJSX} from 'shared/ReactFeatureFlags';
import checkPropTypes from 'shared/checkPropTypes';
import isArray from 'shared/isArray';
@@ -365,13 +364,11 @@ export function jsxWithValidation(
Object.freeze(children);
}
} else {
- if (__DEV__) {
- console.error(
- 'React.jsx: Static children should always be an array. ' +
- 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' +
- 'Use the Babel transform instead.',
- );
- }
+ console.error(
+ 'React.jsx: Static children should always be an array. ' +
+ 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' +
+ 'Use the Babel transform instead.',
+ );
}
} else {
validateChildKeys(children, type);
@@ -379,31 +376,29 @@ export function jsxWithValidation(
}
}
- if (warnAboutSpreadingKeyToJSX) {
- if (hasOwnProperty.call(props, 'key')) {
- const componentName = getComponentNameFromType(type);
- const keys = Object.keys(props).filter(k => k !== 'key');
- const beforeExample =
- keys.length > 0
- ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}'
- : '{key: someKey}';
- if (!didWarnAboutKeySpread[componentName + beforeExample]) {
- const afterExample =
- keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';
- console.error(
- 'A props object containing a "key" prop is being spread into JSX:\n' +
- ' let props = %s;\n' +
- ' <%s {...props} />\n' +
- 'React keys must be passed directly to JSX without using spread:\n' +
- ' let props = %s;\n' +
- ' <%s key={someKey} {...props} />',
- beforeExample,
- componentName,
- afterExample,
- componentName,
- );
- didWarnAboutKeySpread[componentName + beforeExample] = true;
- }
+ if (hasOwnProperty.call(props, 'key')) {
+ const componentName = getComponentNameFromType(type);
+ const keys = Object.keys(props).filter(k => k !== 'key');
+ const beforeExample =
+ keys.length > 0
+ ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}'
+ : '{key: someKey}';
+ if (!didWarnAboutKeySpread[componentName + beforeExample]) {
+ const afterExample =
+ keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';
+ console.error(
+ 'A props object containing a "key" prop is being spread into JSX:\n' +
+ ' let props = %s;\n' +
+ ' <%s {...props} />\n' +
+ 'React keys must be passed directly to JSX without using spread:\n' +
+ ' let props = %s;\n' +
+ ' <%s key={someKey} {...props} />',
+ beforeExample,
+ componentName,
+ afterExample,
+ componentName,
+ );
+ didWarnAboutKeySpread[componentName + beforeExample] = true;
}
}
diff --git a/packages/react/src/__tests__/ReactElementJSX-test.js b/packages/react/src/__tests__/ReactElementJSX-test.js
index ad42046087c4d..4b7e70a073366 100644
--- a/packages/react/src/__tests__/ReactElementJSX-test.js
+++ b/packages/react/src/__tests__/ReactElementJSX-test.js
@@ -264,33 +264,31 @@ describe('ReactElement.jsx', () => {
);
});
- if (require('shared/ReactFeatureFlags').warnAboutSpreadingKeyToJSX) {
- it('should warn when keys are passed as part of props', () => {
- const container = document.createElement('div');
- class Child extends React.Component {
- render() {
- return JSXRuntime.jsx('div', {});
- }
+ it('should warn when keys are passed as part of props', () => {
+ const container = document.createElement('div');
+ class Child extends React.Component {
+ render() {
+ return JSXRuntime.jsx('div', {});
}
- class Parent extends React.Component {
- render() {
- return JSXRuntime.jsx('div', {
- children: [JSXRuntime.jsx(Child, {key: '0', prop: 'hi'})],
- });
- }
+ }
+ class Parent extends React.Component {
+ render() {
+ return JSXRuntime.jsx('div', {
+ children: [JSXRuntime.jsx(Child, {key: '0', prop: 'hi'})],
+ });
}
- expect(() =>
- ReactDOM.render(JSXRuntime.jsx(Parent, {}), container),
- ).toErrorDev(
- 'Warning: A props object containing a "key" prop is being spread into JSX:\n' +
- ' let props = {key: someKey, prop: ...};\n' +
- ' \n' +
- 'React keys must be passed directly to JSX without using spread:\n' +
- ' let props = {prop: ...};\n' +
- ' ',
- );
- });
- }
+ }
+ expect(() =>
+ ReactDOM.render(JSXRuntime.jsx(Parent, {}), container),
+ ).toErrorDev(
+ 'Warning: A props object containing a "key" prop is being spread into JSX:\n' +
+ ' let props = {key: someKey, prop: ...};\n' +
+ ' \n' +
+ 'React keys must be passed directly to JSX without using spread:\n' +
+ ' let props = {prop: ...};\n' +
+ ' ',
+ );
+ });
it('should not warn when unkeyed children are passed to jsxs', () => {
const container = document.createElement('div');
diff --git a/packages/react/src/jsx/ReactJSXElementValidator.js b/packages/react/src/jsx/ReactJSXElementValidator.js
index 044f9a2b05948..947d806058732 100644
--- a/packages/react/src/jsx/ReactJSXElementValidator.js
+++ b/packages/react/src/jsx/ReactJSXElementValidator.js
@@ -21,7 +21,6 @@ import {
REACT_FRAGMENT_TYPE,
REACT_ELEMENT_TYPE,
} from 'shared/ReactSymbols';
-import {warnAboutSpreadingKeyToJSX} from 'shared/ReactFeatureFlags';
import hasOwnProperty from 'shared/hasOwnProperty';
import isArray from 'shared/isArray';
import {jsxDEV} from './ReactJSXElement';
@@ -390,31 +389,29 @@ export function jsxWithValidation(
}
}
- if (warnAboutSpreadingKeyToJSX) {
- if (hasOwnProperty.call(props, 'key')) {
- const componentName = getComponentNameFromType(type);
- const keys = Object.keys(props).filter(k => k !== 'key');
- const beforeExample =
- keys.length > 0
- ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}'
- : '{key: someKey}';
- if (!didWarnAboutKeySpread[componentName + beforeExample]) {
- const afterExample =
- keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';
- console.error(
- 'A props object containing a "key" prop is being spread into JSX:\n' +
- ' let props = %s;\n' +
- ' <%s {...props} />\n' +
- 'React keys must be passed directly to JSX without using spread:\n' +
- ' let props = %s;\n' +
- ' <%s key={someKey} {...props} />',
- beforeExample,
- componentName,
- afterExample,
- componentName,
- );
- didWarnAboutKeySpread[componentName + beforeExample] = true;
- }
+ if (hasOwnProperty.call(props, 'key')) {
+ const componentName = getComponentNameFromType(type);
+ const keys = Object.keys(props).filter(k => k !== 'key');
+ const beforeExample =
+ keys.length > 0
+ ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}'
+ : '{key: someKey}';
+ if (!didWarnAboutKeySpread[componentName + beforeExample]) {
+ const afterExample =
+ keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';
+ console.error(
+ 'A props object containing a "key" prop is being spread into JSX:\n' +
+ ' let props = %s;\n' +
+ ' <%s {...props} />\n' +
+ 'React keys must be passed directly to JSX without using spread:\n' +
+ ' let props = %s;\n' +
+ ' <%s key={someKey} {...props} />',
+ beforeExample,
+ componentName,
+ afterExample,
+ componentName,
+ );
+ didWarnAboutKeySpread[componentName + beforeExample] = true;
}
}
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 63d1aae161181..7a9a02262e9cf 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -185,19 +185,6 @@ export const enableCustomElementPropertySupport = __EXPERIMENTAL__;
// Disables children for