From 0a2bb2d1721ae8fd2bac18815f860552ffc2da32 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 25 Oct 2023 12:56:34 +0800
Subject: [PATCH] Add key values to items in loop

---
 packages/web/pages/settings/labels.tsx        | 11 +++++--
 .../web/pages/settings/saved-searches.tsx     | 31 ++++++++++++-------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx
index 03579e8bb..dbd81ed95 100644
--- a/packages/web/pages/settings/labels.tsx
+++ b/packages/web/pages/settings/labels.tsx
@@ -412,9 +412,16 @@ export default function LabelsPage(): JSX.Element {
 
                 if (editingLabelId == label.id) {
                   if (windowWidth >= breakpoint) {
-                    return <DesktopEditCard {...cardProps} />
+                    return (
+                      <DesktopEditCard
+                        key={`edit-${label.id}`}
+                        {...cardProps}
+                      />
+                    )
                   } else {
-                    return <MobileEditCard {...cardProps} />
+                    return (
+                      <MobileEditCard key={`edit-${label.id}`} {...cardProps} />
+                    )
                   }
                 }
 
diff --git a/packages/web/pages/settings/saved-searches.tsx b/packages/web/pages/settings/saved-searches.tsx
index 5c5cc8e43..0117c95cc 100644
--- a/packages/web/pages/settings/saved-searches.tsx
+++ b/packages/web/pages/settings/saved-searches.tsx
@@ -488,9 +488,19 @@ export default function SavedSearchesPage(): JSX.Element {
                 }
                 if (editingId == savedSearch.id) {
                   if (windowWidth >= breakpoint) {
-                    return <DesktopEditCard {...cardProps} />
+                    return (
+                      <DesktopEditCard
+                        key={`edit-${savedSearch.id}`}
+                        {...cardProps}
+                      />
+                    )
                   } else {
-                    return <MobileEditCard {...cardProps} />
+                    return (
+                      <MobileEditCard
+                        key={`edit-${savedSearch.id}`}
+                        {...cardProps}
+                      />
+                    )
                   }
                 }
 
@@ -569,15 +579,14 @@ function GenericTableCard(
     editingId === savedSearch?.id || (isCreateMode && !savedSearch)
   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
   const DEFAULT_STYLE = { position: null }
-  const [style, setStyle] =
-    useState<
-      Partial<{
-        position: string | null
-        top: string
-        left: string
-        maxWidth: string
-      }>
-    >(DEFAULT_STYLE)
+  const [style, setStyle] = useState<
+    Partial<{
+      position: string | null
+      top: string
+      left: string
+      maxWidth: string
+    }>
+  >(DEFAULT_STYLE)
   const handleEdit = () => {
     editingId && updateSavedSearch(editingId)
     setEditingId(null)