From 7980e4ebf52b928b06b9e40a49f4c7090b70a519 Mon Sep 17 00:00:00 2001
From: Oliver Roick <oliver@roick.email>
Date: Thu, 8 Feb 2024 15:54:09 +1100
Subject: [PATCH] fix: Provide keys are array components

---
 src/pages/ItemDetail/PropertyList.tsx | 8 ++++----
 src/pages/ItemDetail/TableValue.tsx   | 3 ++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/pages/ItemDetail/PropertyList.tsx b/src/pages/ItemDetail/PropertyList.tsx
index 366bc31..a545f66 100644
--- a/src/pages/ItemDetail/PropertyList.tsx
+++ b/src/pages/ItemDetail/PropertyList.tsx
@@ -20,9 +20,9 @@ function PropertyList({ properties, headerLevel = "h2" }: PropertyListProps) {
         .filter(([ key ]: PropType) => !IGNORE_PROPS.includes(key))
         .map(([ key, val ]: PropType, index: number) => (
           (val.itemOrder && val.itemOrder.length > 1) ? (
-            <>
+            <Box key={key}>
               <Text>{val.label}</Text>
-              <TableContainer key={key}>
+              <TableContainer>
                 <Table size="sm">
                   <Thead>
                     <Tr>
@@ -34,7 +34,7 @@ function PropertyList({ properties, headerLevel = "h2" }: PropertyListProps) {
                   </Thead>
                   <Tbody>
                     { val.value.map((value) => (
-                      <Tr key={value.name}>
+                      <Tr key={JSON.stringify(value)}>
                         {val.itemOrder.map((item) => (
                           <Td key={item} valign="top">
                             <TableValue value={value[item]} />
@@ -45,7 +45,7 @@ function PropertyList({ properties, headerLevel = "h2" }: PropertyListProps) {
                   </Tbody>
                 </Table>
               </TableContainer>
-            </>
+            </Box>
           ) : (
             <Box
               key={key}
diff --git a/src/pages/ItemDetail/TableValue.tsx b/src/pages/ItemDetail/TableValue.tsx
index 3a661ea..40009ce 100644
--- a/src/pages/ItemDetail/TableValue.tsx
+++ b/src/pages/ItemDetail/TableValue.tsx
@@ -8,7 +8,8 @@ function TableValue({ value }: TableValueProps) {
   if (Array.isArray(value)) {
     return (
       <UnorderedList my="0">
-        {value.map(v => <ListItem key={v}>{v}</ListItem>)}
+        {/* eslint-disable-next-line react/no-array-index-key */}
+        {value.map((v, i) => <ListItem key={`${i}-${v}`}>{v}</ListItem>)}
       </UnorderedList>
     );
   }