From 5f4943e02548f0a6fadd11197db4b57f1df20cc1 Mon Sep 17 00:00:00 2001
From: FoxxMD <FoxxMD@users.noreply.github.com>
Date: Fri, 20 Mar 2026 20:47:38 +0000
Subject: [PATCH] fix(ui): Fix keys

---
 src/client/components/PlayData.tsx            | 6 +++---
 src/client/components/ScrobbleMatchResult.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/client/components/PlayData.tsx b/src/client/components/PlayData.tsx
index f016be9e..7945bb85 100644
--- a/src/client/components/PlayData.tsx
+++ b/src/client/components/PlayData.tsx
@@ -171,13 +171,13 @@ export const PlayDatesStack = (props: { play: JsonPlayObject, dates: DisplayDate
     } else {
         const dateElements = [];
         if (dates.includes('played') || dates.includes('all')) {
-            dateElements.push((<TextMuted>{`Played ${shortTodayAwareFormat(dayjs(play.data.playDate))}`}</TextMuted>));
+            dateElements.push((<TextMuted key="playDate">{`Played ${shortTodayAwareFormat(dayjs(play.data.playDate))}`}</TextMuted>));
             if (play.data.playDateCompleted !== undefined) {
-                dateElements.push((<TextMuted>{`Played Until ${shortTodayAwareFormat(dayjs(play.data.playDateCompleted))}`}</TextMuted>));
+                dateElements.push((<TextMuted key="playDateCompleted">{`Played Until ${shortTodayAwareFormat(dayjs(play.data.playDateCompleted))}`}</TextMuted>));
             }
         }
         if (dates.includes('seen') || dates.includes('all')) {
-            dateElements.push((<TextMuted>{`Seen ${shortTodayAwareFormat(dayjs(play.data.playDate))}`}</TextMuted>));
+            dateElements.push((<TextMuted key="seen">{`Seen ${shortTodayAwareFormat(dayjs(play.data.playDate))}`}</TextMuted>));
         }
         datesItem = (
             <DataList.Item>
diff --git a/src/client/components/ScrobbleMatchResult.tsx b/src/client/components/ScrobbleMatchResult.tsx
index 29a8fcc8..0abce0d3 100644
--- a/src/client/components/ScrobbleMatchResult.tsx
+++ b/src/client/components/ScrobbleMatchResult.tsx
@@ -49,17 +49,17 @@ export const ScrobbleMatchResult = (props: ScrobbleMatchResultProps) => {
                         <DataList.ItemLabel flexShrink="1">Breakdown</DataList.ItemLabel>
                         <DataList.ItemValue>
                             <List.Root>
-                                {match.breakdowns.map((x) => {
+                                {match.breakdowns.map((x, index) => {
                                     if (x.includes('Time Detail')) {
                                         const sub = x.substring(15).split('|');
                                         return (
                                             <List.Root ps="5">
-                                                {sub.map((y) => <List.Item>{y}</List.Item>)}
+                                                {sub.map((y, index) => <List.Item key={index}>{y}</List.Item>)}
                                             </List.Root>
 
                                         )
                                     }
-                                    return <List.Item>{x}</List.Item>
+                                    return <List.Item key={index}>{x}</List.Item>
                                 })}
                             </List.Root>
                         </DataList.ItemValue>
-- 
2.51.2