Nits

facebook · Nov 16, 2022 · 9e135dc · 9e135dc
1 parent 2736161
commit 9e135dc
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
diff --git a/packages/react/src/ReactElementValidator.js b/packages/react/src/ReactElementValidator.js
@@ -382,21 +382,20 @@ export function jsxWithValidation(
     if (warnAboutSpreadingKeyToJSX) {
       if (hasOwnProperty.call(props, 'key')) {
         const componentName = getComponentNameFromType(type);
-        const keys = Object.keys(props);
-        const beforeExample = '{' + keys.join(': ..., ') + ': ...}';
+        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 keysWithoutKey = keys.filter(k => k !== 'key');
           const afterExample =
-            keysWithoutKey.length > 0
-              ? '{' + keysWithoutKey.join(': ..., ') + ': ...}'
+            keys.length > 0
+              ? '{' + keys.join(': ..., ') + ': ...}'
               : '{}';
           console.error(
-            'An props object containing a "key" prop is being spread into JSX:\n' +
+            '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={...} {...props} />',
+              '  <%s key={someKey} {...props} />',
             beforeExample,
             componentName,
             afterExample,

diff --git a/packages/react/src/__tests__/ReactElementJSX-test.js b/packages/react/src/__tests__/ReactElementJSX-test.js
@@ -275,19 +275,19 @@ describe('ReactElement.jsx', () => {
       class Parent extends React.Component {
         render() {
           return JSXRuntime.jsx('div', {
-            children: [JSXRuntime.jsx(Child, {key: '0'})],
+            children: [JSXRuntime.jsx(Child, {key: '0', prop: 'hi'})],
           });
         }
       }
       expect(() =>
         ReactDOM.render(JSXRuntime.jsx(Parent, {}), container),
       ).toErrorDev(
-        'Warning: An props object containing a "key" prop is being spread into JSX:\n' +
-          '  let props = {key: ...};\n' +
+        'Warning: A props object containing a "key" prop is being spread into JSX:\n' +
+          '  let props = {key: someKey, prop: ...};\n' +
           '  <Child {...props} />\n' +
           'React keys must be passed directly to JSX without using spread:\n' +
-          '  let props = {};\n' +
-          '  <Child key={...} {...props} />',
+          '  let props = {prop: ...};\n' +
+          '  <Child key={someKey} {...props} />',
       );
     });
   }

diff --git a/packages/react/src/jsx/ReactJSXElementValidator.js b/packages/react/src/jsx/ReactJSXElementValidator.js
@@ -393,21 +393,20 @@ export function jsxWithValidation(
     if (warnAboutSpreadingKeyToJSX) {
       if (hasOwnProperty.call(props, 'key')) {
         const componentName = getComponentNameFromType(type);
-        const keys = Object.keys(props);
-        const beforeExample = '{' + keys.join(': ..., ') + ': ...}';
+        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 keysWithoutKey = keys.filter(k => k !== 'key');
           const afterExample =
-            keysWithoutKey.length > 0
-              ? '{' + keysWithoutKey.join(': ..., ') + ': ...}'
+            keys.length > 0
+              ? '{' + keys.join(': ..., ') + ': ...}'
               : '{}';
           console.error(
-            'An props object containing a "key" prop is being spread into JSX:\n' +
+            '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={...} {...props} />',
+              '  <%s key={someKey} {...props} />',
             beforeExample,
             componentName,
             afterExample,