fix unique key prop error on forms

umami-software · Mar 3, 2025 · 72ac97c · 72ac97c
1 parent cfc3662
commit 72ac97c
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 }}>