From f17471dae53d82494803a8b694621ea8946138a7 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 16 Jan 2025 12:10:45 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A8(frontend)=20resolve=20key=20prop?=
 =?UTF-8?q?=20warning=20in=20ParticipantListItem?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Key prop was incorrectly passed down as a regular prop to ParticipantListItem
instead of being used at the array mapping level. Key is a special React prop
for list rendering and cannot be accessed as a component prop.
---
 .../controls/Participants/ParticipantListItem.tsx      |  1 -
 .../controls/Participants/ParticipantsList.tsx         | 10 ++++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
index 7b2b58d9..4949c24a 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
@@ -118,7 +118,6 @@ export const ParticipantListItem = ({
     <HStack
       role="listitem"
       justify="space-between"
-      key={participant.identity}
       id={participant.identity}
       className={css({
         padding: '0.25rem 0',
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
index c1f5cc9d..9453e6a1 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
@@ -56,7 +56,10 @@ export const ParticipantsList = () => {
             heading={t('raisedHands')}
             participants={raisedHandParticipants}
             renderParticipant={(participant) => (
-              <HandRaisedListItem participant={participant} />
+              <HandRaisedListItem
+                key={participant.identity}
+                participant={participant}
+              />
             )}
             action={() => (
               <LowerAllHandsButton participants={raisedHandParticipants} />
@@ -68,7 +71,10 @@ export const ParticipantsList = () => {
         heading={t('contributors')}
         participants={sortedParticipants}
         renderParticipant={(participant) => (
-          <ParticipantListItem participant={participant} />
+          <ParticipantListItem
+            key={participant.identity}
+            participant={participant}
+          />
         )}
       />
     </Div>