Fix warning from React about spreading key onto props when editing …

…item in array field (#1389)
Thinkmill · Jan 10, 2025 · c300a68 · c300a68
1 parent 85c46c7
commit c300a68
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/.changeset/nine-dolls-appear.md b/.changeset/nine-dolls-appear.md
@@ -0,0 +1,6 @@
+---
+'@keystatic/core': patch
+---
+
+Fix warning from React about spreading `key` onto props when editing item in
+array field
diff --git a/packages/keystatic/src/form/fields/array/ui.tsx b/packages/keystatic/src/form/fields/array/ui.tsx
@@ -257,6 +257,9 @@ function ArrayEditItemModalContent(props: {
     return { slugs, field: slugField, glob: '*' as const };
   }, [props.previewProps, props.modalStateIndex]);
 
+  const { key, ...propsWithoutKey } =
+    props.previewProps.elements[props.modalStateIndex];
+
   return (
     <Content>
       <VStack
@@ -272,7 +275,7 @@ function ArrayEditItemModalContent(props: {
         <FormValueContentFromPreviewProps
           slugField={slugInfo}
           autoFocus
-          {...props.previewProps.elements[props.modalStateIndex]}
+          {...propsWithoutKey}
         />
       </VStack>
     </Content>