feat: add keys to reference via index

Author: Tbusk

src/components/experience/ExperienceItem.tsx

@@ -29,8 +29,8 @@ export default function ExperienceItem(props: ExperienceItemProps) {
                 </div>
 
                 <ul className="list-disc pl-4">
-                    {props.description.map((content) => (
-                        <li className="pl-2 py-1.5">
+                    {props.description.map((content, index) => (
+                        <li className="pl-2 py-1.5" key={index}>
                             {content}
                         </li>
                     ))}

src/components/header/HeaderListItem.tsx

@@ -1,11 +1,12 @@
 interface HeaderListItemProps {
     name: string;
     id: string;
+    index: number;
 }
 
 export default function HeaderListItem(props: HeaderListItemProps) {
     return (
-        <li className="hover:underline hover:scale-110 text-xl hidden sm:block">
+        <li className="hover:underline hover:scale-110 text-xl hidden sm:block" key={props.index}>
             <a href={`#${props.id}`}>
                 {props.name}
             </a>

src/components/header/HeaderListItemMobile.tsx

@@ -6,11 +6,12 @@ interface HeaderListItemMobileProps {
     id: string;
     isOpen: boolean;
     setIsOpen: Dispatch<SetStateAction<boolean>>;
+    index: number;
 }
 
 export default function HeaderListItemMobile(props: HeaderListItemMobileProps) {
     return (
-        <li className="hover:underline hover:scale-110 text-xl py-3 text-center">
+        <li className="hover:underline hover:scale-110 text-xl py-3 text-center" key={props.index}>
             <a href={`#${props.id}`} onClick={() => props.setIsOpen(!props.isOpen)}>
                 {props.name}
             </a>

src/components/header/NavbarContent.tsx

@@ -4,12 +4,12 @@ export default function NavbarContent() {
     return (
         <>
             <ul className="gap-8 justify-center hidden md:flex py-8">
-                <HeaderListItem name="Home" id="home" />
-                <HeaderListItem name="Experience" id="experience" />
-                <HeaderListItem name="Skills" id="skills" />
-                <HeaderListItem name="Education" id="education" />
-                <HeaderListItem name="Projects" id="projects" />
-                <HeaderListItem name="Open Source" id="opensource" />
+                <HeaderListItem name="Home" id="home" index={0}/>
+                <HeaderListItem name="Experience" id="experience" index={1} />
+                <HeaderListItem name="Skills" id="skills" index={2} />
+                <HeaderListItem name="Education" id="education" index={3} />
+                <HeaderListItem name="Projects" id="projects" index={4} />
+                <HeaderListItem name="Open Source" id="opensource" index={5} />
             </ul>
         </>
     );

src/components/header/NavbarContentMobile.tsx

@@ -22,12 +22,12 @@ export default function NavbarContentMobile() {
                             Pages
                         </div>
                         <ul className="flex-row justify-center">
-                            <HeaderListItemMobile name="Home" id="home" isOpen={isMenuOpen} setIsOpen={setIsMenuOpen} />
-                            <HeaderListItemMobile name="Experience" id="experience" isOpen={isMenuOpen} setIsOpen={setIsMenuOpen} />
-                            <HeaderListItemMobile name="Skills" id="skills" isOpen={isMenuOpen} setIsOpen={setIsMenuOpen} />
-                            <HeaderListItemMobile name="Education" id="education" isOpen={isMenuOpen} setIsOpen={setIsMenuOpen} />
-                            <HeaderListItemMobile name="Projects" id="projects" isOpen={isMenuOpen} setIsOpen={setIsMenuOpen} />
-                            <HeaderListItemMobile name="Open Source" id="opensource" isOpen={isMenuOpen} setIsOpen={setIsMenuOpen} />
+                            <HeaderListItemMobile name="Home" id="home" isOpen={isMenuOpen} setIsOpen={setIsMenuOpen} index={0}/>
+                            <HeaderListItemMobile name="Experience" id="experience" isOpen={isMenuOpen} setIsOpen={setIsMenuOpen} index={1}/>
+                            <HeaderListItemMobile name="Skills" id="skills" isOpen={isMenuOpen} setIsOpen={setIsMenuOpen} index={2}/>
+                            <HeaderListItemMobile name="Education" id="education" isOpen={isMenuOpen} setIsOpen={setIsMenuOpen} index={3}/>
+                            <HeaderListItemMobile name="Projects" id="projects" isOpen={isMenuOpen} setIsOpen={setIsMenuOpen} index={4}/>
+                            <HeaderListItemMobile name="Open Source" id="opensource" isOpen={isMenuOpen} setIsOpen={setIsMenuOpen} index={5}/>
                         </ul>
                     </div>
                 )}