From 72ac97c5d94edafa7c936ad1ef9ed66b46ba3eeb Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Mon, 3 Mar 2025 12:24:54 -0800
Subject: [PATCH] fix unique key prop error on forms

---
 src/app/(main)/reports/ReportDeleteButton.tsx                 | 4 +++-
 src/app/(main)/settings/teams/TeamLeaveForm.tsx               | 4 +++-
 src/app/(main)/settings/users/UserDeleteForm.tsx              | 4 +++-
 .../[teamId]/settings/members/TeamMemberRemoveButton.tsx      | 4 +++-
 src/components/common/TypeConfirmationForm.tsx                | 4 +++-
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/app/(main)/reports/ReportDeleteButton.tsx b/src/app/(main)/reports/ReportDeleteButton.tsx
index efd1da3c7e..ca096675f9 100644
--- a/src/app/(main)/reports/ReportDeleteButton.tsx
+++ b/src/app/(main)/reports/ReportDeleteButton.tsx
@@ -39,7 +39,9 @@ export function ReportDeleteButton({
       <Modal title={formatMessage(labels.deleteReport)}>
         {(close: () => void) => (
           <ConfirmationForm
-            message={formatMessage(messages.confirmDelete, { target: <b>{reportName}</b> })}
+            message={formatMessage(messages.confirmDelete, {
+              target: <b key={messages.confirmDelete.id}>{reportName}</b>,
+            })}
             isLoading={isPending}
             error={error}
             onConfirm={handleConfirm.bind(null, close)}
diff --git a/src/app/(main)/settings/teams/TeamLeaveForm.tsx b/src/app/(main)/settings/teams/TeamLeaveForm.tsx
index daf4643416..389ba4ea71 100644
--- a/src/app/(main)/settings/teams/TeamLeaveForm.tsx
+++ b/src/app/(main)/settings/teams/TeamLeaveForm.tsx
@@ -34,7 +34,9 @@ export function TeamLeaveForm({
   return (
     <ConfirmationForm
       buttonLabel={formatMessage(labels.leave)}
-      message={formatMessage(messages.confirmLeave, { target: <b>{teamName}</b> })}
+      message={formatMessage(messages.confirmLeave, {
+        target: <b key={messages.confirmLeave.id}>{teamName}</b>,
+      })}
       onConfirm={handleConfirm}
       onClose={onClose}
       isLoading={isPending}
diff --git a/src/app/(main)/settings/users/UserDeleteForm.tsx b/src/app/(main)/settings/users/UserDeleteForm.tsx
index 3ac7c11860..5c307cdcc0 100644
--- a/src/app/(main)/settings/users/UserDeleteForm.tsx
+++ b/src/app/(main)/settings/users/UserDeleteForm.tsx
@@ -19,7 +19,9 @@ export function UserDeleteForm({ userId, username, onSave, onClose }) {
 
   return (
     <ConfirmationForm
-      message={formatMessage(messages.confirmDelete, { target: <b>{username}</b> })}
+      message={formatMessage(messages.confirmDelete, {
+        target: <b key={messages.confirmDelete.id}>{username}</b>,
+      })}
       onConfirm={handleConfirm}
       onClose={onClose}
       buttonLabel={formatMessage(labels.delete)}
diff --git a/src/app/(main)/teams/[teamId]/settings/members/TeamMemberRemoveButton.tsx b/src/app/(main)/teams/[teamId]/settings/members/TeamMemberRemoveButton.tsx
index 931390c7b5..0dfe758b26 100644
--- a/src/app/(main)/teams/[teamId]/settings/members/TeamMemberRemoveButton.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/members/TeamMemberRemoveButton.tsx
@@ -43,7 +43,9 @@ export function TeamMemberRemoveButton({
       <Modal title={formatMessage(labels.removeMember)}>
         {(close: () => void) => (
           <ConfirmationForm
-            message={formatMessage(messages.confirmRemove, { target: <b>{userName}</b> })}
+            message={formatMessage(messages.confirmRemove, {
+              target: <b key={messages.confirmRemove.id}>{userName}</b>,
+            })}
             isLoading={isPending}
             error={error}
             onConfirm={handleConfirm.bind(null, close)}
diff --git a/src/components/common/TypeConfirmationForm.tsx b/src/components/common/TypeConfirmationForm.tsx
index baf5949f29..9ef5b30a0a 100644
--- a/src/components/common/TypeConfirmationForm.tsx
+++ b/src/components/common/TypeConfirmationForm.tsx
@@ -35,7 +35,9 @@ export function TypeConfirmationForm({
   return (
     <Form onSubmit={onConfirm} error={error}>
       <p>
-        {formatMessage(messages.actionConfirmation, { confirmation: <b>{confirmationValue}</b> })}
+        {formatMessage(messages.actionConfirmation, {
+          confirmation: <b key={messages.actionConfirmation.id}>{confirmationValue}</b>,
+        })}
       </p>
       <FormRow label={formatMessage(labels.confirm)}>
         <FormInput name="confirm" rules={{ validate: value => value === confirmationValue }}>