Also added keys to react component iteration, a minor bug causing war…

…nings when running dev
ScilifelabDataCentre · Apr 22, 2024 · 26547d6 · 26547d6
1 parent 69f4ce8
commit 26547d6
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/pmp-frontend-app/src/components/FooterComponent.tsx b/pmp-frontend-app/src/components/FooterComponent.tsx
@@ -43,19 +43,19 @@ export default function FooterComponent(): ReactElement {
       <footer className='footer pt-10 px-10 bg-primary text-primary-content'>
         <nav>
         {Object.keys(linksCol1).map( key => (
-            <Link className={linksCol1[key].classes} to={linksCol1[key].link}>{linksCol1[key].text}</Link>
+            <Link className={linksCol1[key].classes} to={linksCol1[key].link} key={key}>{linksCol1[key].text}</Link>
         ))}
         </nav> 
         <nav>
         {Object.keys(linksCol2).map( key => (
-            <Link className={linksCol2[key].classes} to={linksCol2[key].link}>{linksCol2[key].text}</Link>
+            <Link className={linksCol2[key].classes} to={linksCol2[key].link} key={key}>{linksCol2[key].text}</Link>
         ))}
         </nav> 
         <nav>
           <header className="footer-title">Social</header> 
           <div className="grid grid-flow-col gap-4">
             {Object.keys(svgs).map( key => (
-              <a href={svgs[key].href}><svg xmlns={svgs[key].xmlns} width={svgs[key].width} height={svgs[key].height} viewBox={svgs[key].viewBox} className={svgs[key].classes}><path d={svgs[key].svg}></path></svg></a>
+              <a href={svgs[key].href} key={key}><svg xmlns={svgs[key].xmlns} width={svgs[key].width} height={svgs[key].height} viewBox={svgs[key].viewBox} className={svgs[key].classes}><path d={svgs[key].svg}></path></svg></a>
             ))}
           </div>
         </nav>

diff --git a/pmp-frontend-app/src/components/HeaderComponent.tsx b/pmp-frontend-app/src/components/HeaderComponent.tsx
@@ -68,7 +68,7 @@ export default function HeaderComponent() {
             <div className="navbar-center lg:flex">
                 <ul className="menu menu-horizontal text-lg mt-0.5">
                 {Object.keys(links).map( key => (
-                    <li>{<NavLink className={links[key].classes} to={links[key].link}>{links[key].text}</NavLink>}</li>
+                    <li key={key}>{<NavLink className={links[key].classes} to={links[key].link}>{links[key].text}</NavLink>}</li>
                 ))}
                 </ul>
             </div>