Adding nanoid for react component list keys

components/footer.js

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { Button } from './jambonz-ui';
 import { homeObj } from '../lib/vars';
+import { nanoid } from 'nanoid';
 
 function FooterItem({ obj }) {
   return (
@@ -21,13 +22,13 @@ export default function Footer({ siteData }) {
         <div className="foot__navs">
           <ul className="foot__links">
             {siteData.footer.links.map((obj) => {
-              return <FooterItem key={obj.id} obj={obj} />
+              return <FooterItem key={nanoid()} obj={obj} />
             })}
           </ul>
           <ul className="foot__links">
             <FooterItem key="home" obj={homeObj} />
             {siteData.navi.links.map((obj) => {
-              return <FooterItem key={obj.id} obj={obj} />
+              return <FooterItem key={nanoid()} obj={obj} />
             })}
           </ul>
         </div>

components/jambonz-ui.js

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import classNames from 'classnames';
 import * as Icons from 'react-feather';
+import { nanoid } from 'nanoid';
 
 export function H1({ children }) {
   return <div className="h1">{children}</div>;
@@ -58,8 +59,8 @@ export function Hero({ data, subStyle }) {
         <H1>{data.headline}</H1>
       </div>
       <div className="hero__subtext">
-        {Array.isArray(data.subtext) ? data.subtext.map((subtext, index) => {
-          return <H5 key={index}>{subtext}</H5>;
+        {Array.isArray(data.subtext) ? data.subtext.map((subtext) => {
+          return <H5 key={nanoid()}>{subtext}</H5>;
         }) : (
           <H5>{data.subtext}</H5>
         )}

components/navi.js

@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 import classNames from 'classnames';
 import { Button, Icon } from './jambonz-ui';
 import { homeObj, mobileMedia } from '../lib/vars';
+import { nanoid } from 'nanoid';
 
 function NaviItem({obj}) {
   const router = useRouter();
@@ -46,12 +47,12 @@ function NaviMobile({ active, handler, siteData }) {
       <ul className="navi__mobile__links">
         <NaviItem key="home" obj={homeObj} />
         {siteData.navi.links.map((obj) => {
-          return <NaviItem key={obj.id} obj={obj} />
+          return <NaviItem key={nanoid()} obj={obj} />
         })}
       </ul>
       <ul className="navi__mobile__footer">
         {siteData.footer.links.map((obj) => {
-          return <NaviItem key={obj.id} obj={obj} />
+          return <NaviItem key={nanoid()} obj={obj} />
         })}
       </ul>
       <div className="navi__mobile__support">
@@ -102,7 +103,7 @@ export default function Navi({ siteData }) {
         </Link>
         <ul className="navi__links">
           {siteData.navi.links.map((obj) => {
-            return <NaviItem key={obj.id} obj={obj} />
+            return <NaviItem key={nanoid()} obj={obj} />
           })}
         </ul>
         <div className="navi__icon" onClick={handleNavi}>