From d84c27b73c4ca9522cd3510a0aa1228236420bac Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Tue, 4 Jun 2024 13:37:17 +0200
Subject: [PATCH] fix: add keys on mapped components

---
 components/Current/Aside/Contacts/Contact.tsx   | 17 ++++++++++++-----
 components/Current/Blocks/index.tsx             |  8 ++++----
 .../OverviewTable/BenefitCard/index.tsx         |  5 ++++-
 .../OverviewTable/BenefitList/index.tsx         |  3 ++-
 components/Loyalty/Blocks/WebView/index.tsx     | 11 +++++++++--
 components/Loyalty/Blocks/index.tsx             | 11 +++++++++--
 components/Loyalty/Sidebar/index.tsx            | 10 +++++++---
 components/MyPages/AccountPage/Content.tsx      |  6 ++++--
 .../MyPages/AccountPage/Webview/Content.tsx     |  6 ++++--
 9 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/components/Current/Aside/Contacts/Contact.tsx b/components/Current/Aside/Contacts/Contact.tsx
index f56260741..39232af72 100644
--- a/components/Current/Aside/Contacts/Contact.tsx
+++ b/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>
             )
diff --git a/components/Current/Blocks/index.tsx b/components/Current/Blocks/index.tsx
index 9f269813b..dfb21f55b 100644
--- a/components/Current/Blocks/index.tsx
+++ b/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
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx
index 0e655233d..3ba7c1f85 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx
@@ -37,7 +37,10 @@ export default function BenefitCard({
       </div>
       <div className={styles.benefitComparison}>
         {comparedValues.map((benefit, idx) => (
-          <div key={idx} className={styles.comparisonItem}>
+          <div
+            key={`${benefit.valueDetails}-${idx}`}
+            className={styles.comparisonItem}
+          >
             <BenefitValue benefit={benefit} />
           </div>
         ))}
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx
index d5f6a6a22..6e3fb3c86 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx
@@ -29,8 +29,9 @@ export default function BenefitList({ levels }: BenefitListProps) {
           <BenefitCard
             title={benefit.name}
             description={benefit.description}
-            comparedValues={levelBenefits.map((benefit) => {
+            comparedValues={levelBenefits.map((benefit, idx) => {
               return {
+                key: `${benefit.name}-${idx}`,
                 value: benefit.value,
                 unlocked: benefit.unlocked,
                 valueDetails: benefit.valueDetails,
diff --git a/components/Loyalty/Blocks/WebView/index.tsx b/components/Loyalty/Blocks/WebView/index.tsx
index 354b04078..85a881142 100644
--- a/components/Loyalty/Blocks/WebView/index.tsx
+++ b/components/Loyalty/Blocks/WebView/index.tsx
@@ -14,10 +14,15 @@ export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
     const firstItem = idx === 0
     switch (block.__typename) {
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardsGrid:
-        return <CardsGrid cards_grid={block.cards_grid} />
+        return (
+          <CardsGrid
+            key={`${block.cards_grid.title}-${idx}`}
+            cards_grid={block.cards_grid}
+          />
+        )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:
         return (
-          <section>
+          <section key={`${block.__typename}-${idx}`}>
             <JsonToHtml
               nodes={block.content.content.json.children}
               embeds={block.content.content.embedded_itemsConnection.edges}
@@ -39,6 +44,7 @@ export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
           <DynamicContentBlock
             dynamicContent={dynamicContent}
             firstItem={firstItem}
+            key={`${block.dynamic_content.title}-${idx}`}
           />
         )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts:
@@ -49,6 +55,7 @@ export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
         return (
           <Shortcuts
             firstItem={firstItem}
+            key={`${block.shortcuts.title}-${idx}`}
             shortcuts={shortcuts}
             title={block.shortcuts.title}
             subtitle={block.shortcuts.preamble}
diff --git a/components/Loyalty/Blocks/index.tsx b/components/Loyalty/Blocks/index.tsx
index 7733109ec..643fe73b0 100644
--- a/components/Loyalty/Blocks/index.tsx
+++ b/components/Loyalty/Blocks/index.tsx
@@ -13,7 +13,7 @@ export function Blocks({ blocks }: BlocksProps) {
     switch (block.__typename) {
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:
         return (
-          <section>
+          <section key={`${block.__typename}-${idx}`}>
             <JsonToHtml
               nodes={block.content.content.json.children}
               embeds={block.content.content.embedded_itemsConnection.edges}
@@ -25,19 +25,26 @@ export function Blocks({ blocks }: BlocksProps) {
           <DynamicContentBlock
             dynamicContent={block.dynamic_content}
             firstItem={firstItem}
+            key={`${block.dynamic_content.title}-${idx}`}
           />
         )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts:
         return (
           <Shortcuts
             firstItem={firstItem}
+            key={`${block.shortcuts.title}-${idx}`}
             shortcuts={block.shortcuts.shortcuts}
             subtitle={block.shortcuts.preamble}
             title={block.shortcuts.title}
           />
         )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardsGrid:
-        return <CardsGrid cards_grid={block.cards_grid} />
+        return (
+          <CardsGrid
+            cards_grid={block.cards_grid}
+            key={`${block.cards_grid.title}-${idx}`}
+          />
+        )
       default:
         return null
     }
diff --git a/components/Loyalty/Sidebar/index.tsx b/components/Loyalty/Sidebar/index.tsx
index 6ffc56b34..2cc4d4c23 100644
--- a/components/Loyalty/Sidebar/index.tsx
+++ b/components/Loyalty/Sidebar/index.tsx
@@ -9,12 +9,15 @@ import { SidebarProps } from "@/types/components/loyalty/sidebar"
 
 export default function SidebarLoyalty({ blocks, lang }: SidebarProps) {
   return (
-    <aside className={styles.aside}>
-      {blocks.map((block) => {
+<aside className={styles.aside}>
+      {blocks.map((block, idx) => {
         switch (block.__typename) {
           case SidebarTypenameEnum.LoyaltyPageSidebarContent:
             return (
-              <section className={styles.content}>
+              <section
+                className={styles.content}
+                key={`${block.__typename}-${idx}`}
+              >
                 <JsonToHtml
                   embeds={block.content.content.embedded_itemsConnection.edges}
                   nodes={block.content.content.json.children}
@@ -26,6 +29,7 @@ export default function SidebarLoyalty({ blocks, lang }: SidebarProps) {
               <JoinLoyaltyContact
                 block={block.join_loyalty_contact}
                 lang={lang}
+                key={`${block.join_loyalty_contact.title}-${idx}`}
               />
             )
           default:
diff --git a/components/MyPages/AccountPage/Content.tsx b/components/MyPages/AccountPage/Content.tsx
index 44f603c81..a3f150aa4 100644
--- a/components/MyPages/AccountPage/Content.tsx
+++ b/components/MyPages/AccountPage/Content.tsx
@@ -47,7 +47,7 @@ function DynamicComponent({ component, props }: AccountPageContentProps) {
 }
 
 export default function Content({ lang, content }: ContentProps) {
-  return content.map((item) => {
+  return content.map((item, idx) => {
     switch (item.__typename) {
       case ContentEntries.AccountPageContentDynamicContent:
         const link = item.dynamic_content.link.linkConnection.edges.length
@@ -71,6 +71,7 @@ export default function Content({ lang, content }: ContentProps) {
         }
         return (
           <DynamicComponent
+            key={`${item.dynamic_content.title}-${idx}`}
             component={item.dynamic_content.component}
             props={componentProps}
           />
@@ -78,6 +79,7 @@ export default function Content({ lang, content }: ContentProps) {
       case ContentEntries.AccountPageContentShortcuts:
         return (
           <Shortcuts
+            key={`${item.shortcuts.title}-${idx}`}
             shortcuts={item.shortcuts.shortcuts}
             subtitle={item.shortcuts.preamble}
             title={item.shortcuts.title}
@@ -85,7 +87,7 @@ export default function Content({ lang, content }: ContentProps) {
         )
       case ContentEntries.AccountPageContentTextContent:
         return (
-          <section>
+          <section key={`${item.__typename}-${idx}`}>
             <JsonToHtml
               embeds={item.text_content.content.embedded_itemsConnection.edges}
               nodes={item.text_content.content.json.children}
diff --git a/components/MyPages/AccountPage/Webview/Content.tsx b/components/MyPages/AccountPage/Webview/Content.tsx
index 6ff8c81c3..096966b38 100644
--- a/components/MyPages/AccountPage/Webview/Content.tsx
+++ b/components/MyPages/AccountPage/Webview/Content.tsx
@@ -48,7 +48,7 @@ function DynamicComponent({ component, props }: AccountPageContentProps) {
 export default function Content({ lang, content }: ContentProps) {
   return (
     <>
-      {content.map((item) => {
+      {content.map((item, idx) => {
         switch (item.__typename) {
           case ContentEntries.AccountPageContentDynamicContent:
             const link = item.dynamic_content.link.linkConnection.edges.length
@@ -70,6 +70,7 @@ export default function Content({ lang, content }: ContentProps) {
             }
             return (
               <DynamicComponent
+                key={`${item.dynamic_content.title}-${idx}`}
                 component={item.dynamic_content.component}
                 props={componentProps}
               />
@@ -83,6 +84,7 @@ export default function Content({ lang, content }: ContentProps) {
             })
             return (
               <Shortcuts
+                key={`${item.shortcuts.title}-${idx}`}
                 shortcuts={shortcuts}
                 subtitle={item.shortcuts.preamble}
                 title={item.shortcuts.title}
@@ -90,7 +92,7 @@ export default function Content({ lang, content }: ContentProps) {
             )
           case ContentEntries.AccountPageContentTextContent:
             return (
-              <section>
+              <section key={`${item.__typename}-${idx}`}>
                 <JsonToHtml
                   embeds={
                     item.text_content.content.embedded_itemsConnection.edges