Add key prop for a list items

threshold-network · Jun 1, 2022 · c2bea99 · c2bea99
1 parent b680b09
commit c2bea99
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/pages/Staking/HowItWorks/AboutAddressesCard.tsx b/src/pages/Staking/HowItWorks/AboutAddressesCard.tsx
@@ -10,13 +10,15 @@ export const AboutAddressesCard: FC<ComponentProps<typeof Card>> = (props) => {
       <Label3>about the Addresses you need to provide</Label3>
       <List mt="5" spacing="6">
         {aboutAddresses.map((action) => (
-          <ListItem>
+          <ListItem key={action.sectionName}>
             <BoxLabel w="fit-content" mb="5">
               {action.sectionName}
             </BoxLabel>
             <List spacing="4">
-              {action.items.map((item) => (
-                <ListItem>{item}</ListItem>
+              {action.items.map((item, index) => (
+                <ListItem key={`${action.sectionName}-${index}`}>
+                  {item}
+                </ListItem>
               ))}
             </List>
           </ListItem>

diff --git a/src/pages/Staking/HowItWorks/StakingActionsCard.tsx b/src/pages/Staking/HowItWorks/StakingActionsCard.tsx
@@ -10,13 +10,15 @@ export const StakingActionsCard: FC<ComponentProps<typeof Card>> = (props) => {
       <Label3>staking actions</Label3>
       <List mt="5" spacing="6">
         {stakingActions.map((action) => (
-          <ListItem>
+          <ListItem key={action.sectionName}>
             <BoxLabel w="fit-content" mb="5">
               {action.sectionName}
             </BoxLabel>
             <List spacing="4">
-              {action.items.map((item) => (
-                <ListItem>{item}</ListItem>
+              {action.items.map((item, index) => (
+                <ListItem key={`${action.sectionName}-${index}}`}>
+                  {item}
+                </ListItem>
               ))}
             </List>
           </ListItem>