fix: Provide keys are array components

developmentseed · Feb 8, 2024 · 7980e4e · 7980e4e
1 parent 6b9b9c5
commit 7980e4e
Show file tree

Hide file tree

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