Fixed warning for list items without keys

jstamant · Jan 24, 2024 · 7910ba6 · 7910ba6
1 parent eff203f
commit 7910ba6
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 27 deletions.
diff --git a/components/header.js b/components/header.js
@@ -18,32 +18,22 @@ const Header = () => {
           <img className="h-12 mr-4 rounded-full" src="/profile.png" />
           <p>Justin St-Amant</p>
         </a>
-        <nav className="text-base">
-          <ul className="h-full flex items-center">
-            <li className="hidden md:flex">
-              <a className="px-8 py-4 transition-colors duration-300 hover:text-theme-500" href={link.home}>Home</a>
-            </li>
-            <li className="hidden md:flex">
-              <a className="px-8 py-4 transition-colors duration-300 hover:text-theme-500" href={link.about}>About</a>
-            </li>
-            <li className="hidden md:flex">
-              <a className="px-8 py-4 transition-colors duration-300 hover:text-theme-500" href={link.projects}>Projects</a>
-            </li>
-            <li className="hidden md:flex">
-              <a className="px-8 py-4 transition-colors duration-300 hover:text-theme-500" href={link.contact}>Contact</a>
-            </li>
-            <li className="md:hidden h-full flex items-center">
-              <input type="checkbox" className="peer group w-16 h-16 z-10 opacity-0 absolute right-0" />
-              <a className="w-16 peer-checked:hidden"><FontAwesomeIcon icon={faBars} className="text-3xl" /></a>
-              <a className="w-16 hidden peer-checked:block"><FontAwesomeIcon icon={faXmark} className="text-3xl" /></a>
-              <nav className="hidden border text-base md:invisible z-0 bg-white peer-checked:block right-0 top-16 absolute flex flex-col items-center divide-y">
-                <a className="transition-colors duration-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href={link.home}><p>Home</p></a>
-                <a className="transition-colors duration-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href={link.about}><p>About</p></a>
-                <a className="transition-colors duration-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href={link.projects}><p>Projects</p></a>
-                <a className="transition-colors duration-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href={link.contact}><p>Contact</p></a>
-              </nav>
-            </li>
-          </ul>
+        <nav className="text-base h-full flex items-center">
+          <a className="hidden md:flex px-8 py-4 transition-colors duration-300 hover:text-theme-500" href={link.home}>Home</a>
+          <a className="hidden md:flex px-8 py-4 transition-colors duration-300 hover:text-theme-500" href={link.about}>About</a>
+          <a className="hidden md:flex px-8 py-4 transition-colors duration-300 hover:text-theme-500" href={link.projects}>Projects</a>
+          <a className="hidden md:flex px-8 py-4 transition-colors duration-300 hover:text-theme-500" href={link.contact}>Contact</a>
+          <div className="md:hidden h-full flex items-center">
+            <input type="checkbox" className="peer group w-16 h-16 z-10 opacity-0 absolute right-0" />
+            <a className="w-16 peer-checked:hidden"><FontAwesomeIcon icon={faBars} className="text-3xl" /></a>
+            <a className="w-16 hidden peer-checked:block"><FontAwesomeIcon icon={faXmark} className="text-3xl" /></a>
+            <nav className="hidden border text-base md:invisible z-0 bg-white peer-checked:block right-0 top-16 absolute flex flex-col items-center divide-y">
+              <a className="transition-colors duration-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href={link.home}><p>Home</p></a>
+              <a className="transition-colors duration-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href={link.about}><p>About</p></a>
+              <a className="transition-colors duration-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href={link.projects}><p>Projects</p></a>
+              <a className="transition-colors duration-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href={link.contact}><p>Contact</p></a>
+            </nav>
+          </div>
         </nav>
       </div>
     </header>

diff --git a/components/projectsummary.js b/components/projectsummary.js
@@ -3,7 +3,9 @@ import Image from 'next/image'
 import LinkButton from '../components/linkbutton'
 
 const ProjectSummary = ({title="title", text=["text"], liveLink, repoLink, imageSource}) => {
-  text = text.map(line => <p>{line}</p>);
+  for (let line = 0; line < text.length; line++) {
+    text[line] = <p key={line}>{text[line]}</p>;
+  }
   if (liveLink) {
     liveLink = <LinkButton href={liveLink} text="See live" target="_blank" />
   }