fix: add keys on mapped components

components/Current/Aside/Contacts/Contact.tsx

@@ -12,13 +12,13 @@ export default function Contact({ sections, system: { locale } }: ContactNode) {
   const visitingAddressMessage = getVisitingAddressMessage(locale)
   return (
     <section>
-      {sections.map((section) => {
+      {sections.map((section, idx) => {
         switch (section.__typename) {
           case Section.ContactBlockSectionsExtraInfo:
             return <p>{section.extra_info.text}</p>
           case Section.ContactBlockSectionsMailingAddress:
             return (
-              <p>
+              <p key={`section-mail-${idx}`}>
                 {section.mailing_address.name}
                 <br />
                 {section.mailing_address.street}
@@ -30,7 +30,10 @@ export default function Contact({ sections, system: { locale } }: ContactNode) {
             )
           case Section.ContactBlockSectionsPhone:
             return (
-              <div className={styles.highlightBlock}>
+              <div
+                className={styles.highlightBlock}
+                key={`section-phone-${idx}`}
+              >
                 <h3>{section.phone.title}</h3>
                 <div className={styles.phoneContainer}>
                   <svg
@@ -55,10 +58,14 @@ export default function Contact({ sections, system: { locale } }: ContactNode) {
               </div>
             )
           case Section.ContactBlockSectionsTitle:
-            return <h2 className={styles.heading}>{section.title.text}</h2>
+            return (
+              <h2 className={styles.heading} key={`section-heading-${idx}`}>
+                {section.title.text}
+              </h2>
+            )
           case Section.ContactBlockSectionsVisitingAddress:
             return (
-              <p>
+              <p key={`section-visiting-address-${idx}`}>
                 {visitingAddressMessage}: {section.visiting_address.street}{" "}
               </p>
             )

components/Current/Blocks/index.tsx

@@ -14,15 +14,15 @@ export default function Blocks({ blocks }: BlocksProps) {
 
   return (
     <section className={styles.wrapper}>
-      {blocks.map((block) => {
+      {blocks.map((block, idx) => {
         const type = block.__typename
         switch (type) {
           case BlocksTypenameEnum.CurrentBlocksPageBlocksList:
-            return <List key={block.__typename} {...block} />
+            return <List key={`${block.__typename}-${idx}`} {...block} />
           case BlocksTypenameEnum.CurrentBlocksPageBlocksPuffs:
-            return <Puffs key={block.__typename} {...block} />
+            return <Puffs key={`${block.__typename}-${idx}`} {...block} />
           case BlocksTypenameEnum.CurrentBlocksPageBlocksText:
-            return <Text key={block.__typename} {...block} />
+            return <Text key={`${block.__typename}-${idx}`} {...block} />
           default:
             console.log(`Unknown type: (${type})`)
             return null