Fix Missing key Validation in React.Children

Author: yungsters

packages/react/src/__tests__/ReactChildren-test.js

@@ -868,7 +868,107 @@ describe('ReactChildren', () => {
     ]);
   });
 
-  it('should warn for flattened children lists', async () => {
+  it('warns for mapped list children without keys', async () => {
+    function ComponentRenderingMappedChildren({children}) {
+      return (
+        <div>
+          {React.Children.map(children, child => (
+            <div />
+          ))}
+        </div>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(
+          <ComponentRenderingMappedChildren>
+            {[<div />]}
+          </ComponentRenderingMappedChildren>,
+        );
+      });
+    }).toErrorDev([
+      'Warning: Each child in a list should have a unique "key" prop.',
+    ]);
+  });
+
+  it('does not warn for mapped static children without keys', async () => {
+    function ComponentRenderingMappedChildren({children}) {
+      return (
+        <div>
+          {React.Children.map(children, child => (
+            <div />
+          ))}
+        </div>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(
+          <ComponentRenderingMappedChildren>
+            <div />
+            <div />
+          </ComponentRenderingMappedChildren>,
+        );
+      });
+    }).toErrorDev([
+      'Warning: Each child in a list should have a unique "key" prop.',
+    ]);
+  });
+
+  it('warns for cloned list children without keys', async () => {
+    function ComponentRenderingClonedChildren({children}) {
+      return (
+        <div>
+          {React.Children.map(children, child => React.cloneElement(child))}
+        </div>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(
+          <ComponentRenderingClonedChildren>
+            {[<div />]}
+          </ComponentRenderingClonedChildren>,
+        );
+      });
+    }).toErrorDev([
+      'Warning: Each child in a list should have a unique "key" prop.',
+    ]);
+  });
+
+  it('does not warn for cloned static children without keys', async () => {
+    function ComponentRenderingClonedChildren({children}) {
+      return (
+        <div>
+          {React.Children.map(children, child => React.cloneElement(child))}
+        </div>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(
+          <ComponentRenderingClonedChildren>
+            <div />
+            <div />
+          </ComponentRenderingClonedChildren>,
+        );
+      });
+    }).toErrorDev([]);
+  });
+
+  it('warns for flattened list children without keys', async () => {
     function ComponentRenderingFlattenedChildren({children}) {
       return <div>{React.Children.toArray(children)}</div>;
     }
@@ -888,7 +988,7 @@ describe('ReactChildren', () => {
     ]);
   });
 
-  it('does not warn for flattened positional children', async () => {
+  it('does not warn for flattened static children without keys', async () => {
     function ComponentRenderingFlattenedChildren({children}) {
       return <div>{React.Children.toArray(children)}</div>;
     }

packages/react/src/jsx/ReactJSXElement.js

@@ -1085,6 +1085,13 @@ export function cloneElement(element, config, children) {
     __DEV__ && enableOwnerStacks ? element._debugTask : undefined,
   );
 
+  if (__DEV__) {
+    // The cloned element should inherit the original element's key validation.
+    if (element._store) {
+      clonedElement._store.validated = element._store.validated;
+    }
+  }
+
   for (let i = 2; i < arguments.length; i++) {
     validateChildKeys(arguments[i], clonedElement.type);
   }