From bfd82015d1078d9009ec338d1bd25710476e6572 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 22 Jul 2025 15:03:33 +0200
Subject: [PATCH] Fix each child in a list should have a key error. (#10393)

The console was complaining. I suspect it was because of the wrapping
fragment. So instead of doing everything within react, I switched to
using a standard case statement.

Also: because name is optional and not guaranteed to be unique, let's
use id for the key instead.
---
 .../ChangeRequestRequestedApprovers.tsx       | 40 +++++++------------
 1 file changed, 15 insertions(+), 25 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestRequestedApprovers/ChangeRequestRequestedApprovers.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestRequestedApprovers/ChangeRequestRequestedApprovers.tsx
index b67a14a52c..36b8623dc6 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestRequestedApprovers/ChangeRequestRequestedApprovers.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestRequestedApprovers/ChangeRequestRequestedApprovers.tsx
@@ -350,31 +350,21 @@ export const ChangeRequestRequestedApprovers: FC<{
                     saveClicked={saveClicked}
                 />
             )}
-            {reviewers.map((reviewer) => (
-                <>
-                    {reviewer.status === 'approved' && (
-                        <ChangeRequestApprover
-                            key={reviewer.name}
-                            name={reviewer.name || 'Unknown user'}
-                            imageUrl={reviewer.imageUrl}
-                        />
-                    )}
-                    {reviewer.status === 'rejected' && (
-                        <ChangeRequestRejector
-                            key={reviewer.name}
-                            name={reviewer.name || 'Unknown user'}
-                            imageUrl={reviewer.imageUrl}
-                        />
-                    )}
-                    {reviewer.status === 'pending' && (
-                        <ChangeRequestPending
-                            key={reviewer.name}
-                            name={reviewer.name || 'Unknown user'}
-                            imageUrl={reviewer.imageUrl}
-                        />
-                    )}
-                </>
-            ))}
+            {reviewers.map((reviewer) => {
+                const key = reviewer.id;
+                const props = {
+                    name: reviewer.name || 'Unknown user',
+                    imageUrl: reviewer.imageUrl,
+                };
+                switch (reviewer.status) {
+                    case 'approved':
+                        return <ChangeRequestApprover key={key} {...props} />;
+                    case 'rejected':
+                        return <ChangeRequestRejector key={key} {...props} />;
+                    case 'pending':
+                        return <ChangeRequestPending key={key} {...props} />;
+                }
+            })}
         </Paper>
     );
 };