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}>

data/site.yml

@@ -6,15 +6,12 @@ navi:
     -
       label: Why jambonz
       link: /why
-      id: why
     -
       label: For Developers
       link: /docs
-      id: docs
     -
       label: Pricing
       link: /pricing
-      id: pricing
 footer:
   email: support@jambonz.com
   links:
@@ -22,17 +19,13 @@ footer:
       label: View on Github
       link: https://github.com/jambonz
       open: true
-      id: github
     -
       label: Join us on Slack
       link: /#
       open: true
-      id: slack
     -
       label: Privacy Policy
       link: /privacy
-      id: privacy
     -
       label: Terms of Service
       link: /terms
-      id: terms

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "classnames": "^2.2.6",
     "env-cmd": "^10.1.0",
+    "nanoid": "^3.1.22",
     "next": "^10.0.8-canary.9",
     "nextra": "^0.4.1",
     "nextra-theme-docs": "^1.1.2",

yarn.lock

@@ -1730,6 +1730,11 @@ nanoid@^3.1.16:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
   integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
 
+nanoid@^3.1.22:
+  version "3.1.22"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.22.tgz#b35f8fb7d151990a8aebd5aa5015c03cf726f844"
+  integrity sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==
+
 native-url@0.3.4:
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/native-url/-/native-url-0.3.4.tgz#29c943172aed86c63cee62c8c04db7f5756661f8"