Fix key Warning for Flattened Positional Children

Author: yungsters

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

@@ -868,6 +868,25 @@ describe('ReactChildren', () => {
     ]);
   });
 
+  it('does not warn for flattened positional children', async () => {
+    function ComponentRenderingFlattenedChildren({children}) {
+      return <div>{React.Children.toArray(children)}</div>;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await expect(async () => {
+      await act(() => {
+        root.render(
+          <ComponentRenderingFlattenedChildren>
+            <div />
+            <div />
+          </ComponentRenderingFlattenedChildren>,
+        );
+      });
+    }).toErrorDev([]);
+  });
+
   it('should escape keys', () => {
     const zero = <div key="1" />;
     const one = <div key="1=::=2" />;

packages/react/src/jsx/ReactJSXElement.js

@@ -953,7 +953,7 @@ export function createElement(type, config, children) {
 }
 
 export function cloneAndReplaceKey(oldElement, newKey) {
-  return ReactElement(
+  const clonedElement = ReactElement(
     oldElement.type,
     newKey,
     // When enableRefAsProp is on, this argument is ignored. This check only
@@ -966,6 +966,11 @@ export function cloneAndReplaceKey(oldElement, newKey) {
     __DEV__ && enableOwnerStacks ? oldElement._debugStack : undefined,
     __DEV__ && enableOwnerStacks ? oldElement._debugTask : undefined,
   );
+  if (__DEV__) {
+    // The cloned element should inherit the original element's key validation.
+    clonedElement._store.validated = oldElement._store.validated;
+  }
+  return clonedElement;
 }
 
 /**