fix: updated TwoColumnPanel to not override children keys (#1100)

Closes #924
dequelabs · Jun 28, 2023 · b60588f · b60588f
1 parent fe1c8ad
commit b60588f
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/packages/react/src/components/TwoColumnPanel/TwoColumnPanel.tsx b/packages/react/src/components/TwoColumnPanel/TwoColumnPanel.tsx
@@ -104,7 +104,11 @@ const TwoColumnPanel = forwardRef<HTMLDivElement, TwoColumnPanelProps>(
         columnLeft,
         { id, ref, tabIndex: -1 },
         children.map((child, index) =>
-          cloneElement(child as React.ReactElement, { key: `left-${index}` })
+          cloneElement(child as React.ReactElement, {
+            key: (child as React.ReactElement).key
+              ? (child as React.ReactElement).key
+              : `left-${index}`
+          })
         )
       );
     }
@@ -151,7 +155,11 @@ const TwoColumnPanel = forwardRef<HTMLDivElement, TwoColumnPanelProps>(
         columnRight,
         { ref, tabIndex: -1 },
         children.map((child, index) =>
-          cloneElement(child as React.ReactElement, { key: `right-${index}` })
+          cloneElement(child as React.ReactElement, {
+            key: (child as React.ReactElement).key
+              ? (child as React.ReactElement).key
+              : `right-${index}`
+          })
         )
       );
     }