Safer keys

rbourdon · Aug 3, 2023 · 5ecfb81 · 5ecfb81
1 parent 9aaf69e
commit 5ecfb81
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 5 deletions.
diff --git a/components/Projects/ProjectInfoPanel/SkillList.js b/components/Projects/ProjectInfoPanel/SkillList.js
@@ -35,7 +35,7 @@ export default function SkillList({ skills, bubbleColor, textColor }) {
           return (
             <SkillBubble
               title={skill.title}
-              key={skill.slug}
+              key={`${skill.slug}_skilllist`}
               custom={index}
               hoverColor={{
                 bg: bubbleColor,

diff --git a/components/Projects/ProjectPost/PostPano.js b/components/Projects/ProjectPost/PostPano.js
@@ -84,7 +84,7 @@ export default function PostPano({ src, children }) {
       <AnimatePresence>
         {!isReady && (
           <PlaceholderImage
-            key={`${src}_placeholder`}
+            key={`${src}_placeholder_pano`}
             initial="hidden"
             animate="visible"
             exit="exit"

diff --git a/components/Projects/ProjectPost/PostVideo.js b/components/Projects/ProjectPost/PostVideo.js
@@ -128,7 +128,7 @@ export default function PostVideo({
         <AnimatePresence>
           {!playing && (
             <PlaceholderImage
-              key={`${src}_placeholder`}
+              key={`${src}_placeholder_video`}
               initial="hidden"
               animate="visible"
               exit="exit"

diff --git a/components/Skills/SkillScroller.js b/components/Skills/SkillScroller.js
@@ -141,7 +141,7 @@ export default function SkillScroller({ skills }) {
           return (
             <SkillBubble
               title={skill.title}
-              key={skill.slug}
+              key={`${skill.slug}_scroller`}
               variants={bubbleV}
               custom={index}
               bgColor={theme.primary}

diff --git a/components/Skills/SkillsCard/SkillRoller.js b/components/Skills/SkillsCard/SkillRoller.js
@@ -57,7 +57,7 @@ export default function SkillRoller({
           <SkillBubble
             title={skill.title}
             id={skill.slug}
-            key={skill.slug}
+            key={`${skill.slug}_roller`}
             top={index === 0 ? true : false}
             bottom={index === numSkills - 1 ? true : false}
             hoverColor={{