Add better key names

Vizzuality · Oct 28, 2024 · 45d9a9c · 45d9a9c
1 parent d4a7cae
commit 45d9a9c
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/src/components/globe-map/globe-group.tsx b/src/components/globe-map/globe-group.tsx
@@ -30,7 +30,7 @@ const GlobeGroup = ({ hasMarkers, markers, selectedMarker, setEnabled, setSelect
       {
         hasMarkers && markers.map((marker, index) => (
           <Marker
-            key={index}
+            key={`globe-marker-${index}`}
             index={markers.indexOf(marker)}
             id={marker.id}
             isSelected={selectedMarker === markers.indexOf(marker)}

diff --git a/src/components/section-1/index.tsx b/src/components/section-1/index.tsx
@@ -67,7 +67,8 @@ export default function Section1() {
           </div> : <div className={cn("flex w-full h-[480px] overflow-hidden mb-10", gridColumns)}>
             <AnimatePresence>
               {Array(3).fill(null).map((_, index) => (
-                <motion.div key={index}
+                <motion.div
+                  key={`image-section1-${index}`}
                   initial={{ opacity: 0, width: 0 }}
                   animate={{ opacity: 1, width: 'auto' }}
                   transition={{ delay: 0.5 + index * 1, duration: 1, ease: "easeInOut" }}

diff --git a/src/components/section-3/index.tsx b/src/components/section-3/index.tsx
@@ -233,7 +233,7 @@ export default function Section3() {
         </div> : <div className={cn("flex w-full h-[498px] overflow-hidden", gridColumns)}>
           <AnimatePresence>
             {Array(5).fill(null).map((_, index) => (
-              <motion.div key={index}
+              <motion.div key={`image-section-3-${index}`}
                 initial={{ opacity: 0, width: 0 }}
                 animate={{ opacity: 1, width: 'auto' }}
                 transition={{ delay: 0.5 + index * 1, duration: 1, ease: "easeInOut" }}

diff --git a/src/components/vertical-carousel/index.tsx b/src/components/vertical-carousel/index.tsx
@@ -35,7 +35,9 @@ const VerticalCarousel = ({ children, className }:
         <AnimatePresence initial={false}>
           {content.map((child, i) => (
             i === index && (
-              <motion.div key={`carousel-item-${i}`} className="absolute w-full"
+              <motion.div
+                key={`carousel-item-${i}`}
+                className="absolute w-full"
                 variants={contentAnimation}
                 initial="initial"
                 animate="animate"