feat: preserve original keys of children elements

toss · Sep 1, 2024 · 67851af · 67851af
1 parent fa3e052
commit 67851af
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/packages/react/react/src/components/Separated/Separated.tsx b/packages/react/react/src/components/Separated/Separated.tsx
@@ -1,6 +1,6 @@
 /** @tossdocs-ignore */
 /** @jsxImportSource react */
-import { Children, Fragment, PropsWithChildren, ReactNode } from 'react';
+import { Children, Fragment, isValidElement, PropsWithChildren, ReactNode } from 'react';
 
 interface Props extends PropsWithChildren {
   with: ReactNode;
@@ -15,10 +15,10 @@ export function Separated({ children, with: separator, first = false, last = fal
   return (
     <>
       {first && separator}
-      {childrenArray.map((child, i) => (
-        <Fragment key={i}>
+      {childrenArray.map((child, index) => (
+        <Fragment key={isValidElement(child) ? child.key : index}>
           {child}
-          {i + 1 !== childrenLength ? separator : null}
+          {index + 1 !== childrenLength && separator}
         </Fragment>
       ))}
       {last && separator}