[FIX] Unique Key Error with .map

Author: carms-ng

src/assets/content/team.json

@@ -23,12 +23,6 @@
       "github": "https://github.com/",
       "image": "002_jeremy_viau_trudel.jpg",
       "highlights": [
-        "Some hightlight",
-        "Some hightlight",
-        "Some hightlight",
-        "Some hightlight",
-        "Some hightlight",
-        "Some hightlight",
         "Some hightlight"
       ]
     }

src/components/carousel-card.js

@@ -5,8 +5,6 @@ import { FiLinkedin, FiGithub, FiChevronLeft, FiChevronRight } from 'react-icons
 import Img from 'gatsby-image';
 import team from '../assets/content/team.json';
 
-
-
 export default function CarouselCard({pic, index, count, activeIndex, setActiveIndex}) {
   // handle carousel navigation
   const handlePrev = () => {
@@ -47,7 +45,7 @@ export default function CarouselCard({pic, index, count, activeIndex, setActiveI
           <ul className="py-4 hidden md:block">
             {person.highlights.map(hl => {
               return (
-                <li>
+                <li key={hl}>
                   <Trans>{hl}</Trans>
                 </li>
               )
@@ -56,9 +54,9 @@ export default function CarouselCard({pic, index, count, activeIndex, setActiveI
         </div>
       </div>
       <ul className="py-4 block md:hidden">
-        {person.highlights.map(hl => {
+        {person.highlights.map((hl, i) => {
           return (
-            <li>
+            <li key={hl + i}>
               <Trans>{hl}</Trans>
             </li>
           )
@@ -102,7 +100,7 @@ const CarouselCardStyles = styled.div`
     color: var(--darkgrey);
   }
   a svg:hover {
-      color: var(--red);
+      color: var(--black);
   }
   .carousel-btns {
     position: absolute;

src/components/carousel.js

@@ -21,6 +21,7 @@ export default function Carousel() {
                 ...GatsbyImageSharpFluid
               }
             }
+            id
           }
         }
       }
@@ -30,7 +31,7 @@ export default function Carousel() {
   return (
     <>
       {pics.map((pic, index) => {
-        return (<CarouselCard pic={pic} key={pic.node.base} index={index} count={pics.length} activeIndex={activeIndex} setActiveIndex={setActiveIndex}/>)
+        return (<CarouselCard pic={pic} key={pic.node.id} index={index} count={pics.length} activeIndex={activeIndex} setActiveIndex={setActiveIndex}/>)
       })}
 
     </>

src/components/logo-garden.js

@@ -46,6 +46,7 @@ export default function LogoGarden() {
               fluid(maxWidth: 500, quality: 80) {
                 ...GatsbyImageSharpFluid
               }
+              id
             }
           }
         }
@@ -61,12 +62,12 @@ export default function LogoGarden() {
           <Trans>Trusted by these partners and clients</Trans>
         </p>
         <div className="logos">
-          {logos.map(({ node }) => (
+          {logos.map(({node}) => (
             <Img
               imgStyle={{ width: `auto`, height: `auto`, top: `50%`, left: `50%`, transform: `translate(-50%, -50%)`}}
               className="m-4"
               fluid={node.childImageSharp.fluid}
-              key={node.base}
+              key={node.childImageSharp.id}
               alt={node.base.split('.')[0]}
             />
           ))}

src/components/stacked-avatar.js

@@ -17,6 +17,7 @@ export default function StackedAvatar() {
               fixed(width: 200) {
                 ...GatsbyImageSharpFixed
               }
+              id
             }
           }
         }
@@ -35,6 +36,7 @@ export default function StackedAvatar() {
             fixed={pic.node.childImageSharp.fixed}
             style={{width: `75px`, height: `75px`, zIndex: `${zIndex}`, border: `1px solid var(--white)`, transform: `translateX(${translateX}%)`}}
             imgStyle={{objectPosition: `top center`}}
+            key={pic.node.childImageSharp.id}
           />
         )
       })}