Repository: nodejs/nodejs.dev (ts)

Issue:
AboutPageSideNavBar: Warning: Each child in a list should have a unique "key" prop.
## Description
This component is not including a unique key prop. 

### Steps to reproduce

browse to localhost:8000/trademark

### Expected result
No errors or warnings in the dev console.

### Actual result
```
react_devtools_backend.js:2560 Warning: Each child in a list should have a unique "key" prop.


Check the render method of `AboutPageSideNavBar`. See https://fb.me/react-warning-keys for more information.
    in Fragment (created by AboutPageSideNavBar)
    in AboutPageSideNavBar (at trademark.tsx:21)
    in main (at trademark.tsx:20)
    in div (at Layout/index.tsx:37)
    in Layout (at trademark.tsx:19)
    in TrademarkPage (created by PageRenderer)
    in PageRenderer (at query-result-store.js:90)
    in PageQueryStore (at root.js:27)
    in RouteHandler (at root.js:49)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (at root.js:44)
    in ScrollHandler (at root.js:40)
    in RouteUpdates (at root.js:39)
    in EnsureResources (at root.js:37)
    in LocationHandler (at root.js:95)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:94)
    in Root (at root.js:102)
    in MDXProvider (at wrap-root-element.js:65)
    in MDXScopeProvider (at wrap-root-element.js:64)
    in _c
    in Unknown (at wrap-root-element.js:72)
    in StaticQueryStore (at root.js:112)
    in ErrorBoundary (at fast-refresh-overlay/index.js:116)
    in DevOverlay (at root.js:111)
    in RootWrappedWithOverlayAndProvider (at app.js:174)
```


Pull request:
Fix unique key warning in AboutPageSideNavBar
Fixes #1442
Hi @benhalverson, how does this look?
Let me know if this needs any changes.
Thanks

Patch:
diff --git a/src/components/AboutPageSideNavBar/index.tsx b/src/components/AboutPageSideNavBar/index.tsx
index b8cbaa62..229518dd 100644
--- a/src/components/AboutPageSideNavBar/index.tsx
+++ b/src/components/AboutPageSideNavBar/index.tsx
@@ -63,30 +63,25 @@ export default function AboutPageSideNavBar({
     : 'side-nav-about';
   const navElement = useRef<HTMLElement | null>(null);
   return (
-    <>
-      {' '}
-      <nav className={className} ref={navElement}>
-        <button type="button" className="side-nav__open" onClick={toggle}>
-          Menu
-        </button>
-        <ul className="community-nav__list">
-          {aboutPageSideNavBarItem.map(({ title: commTitle, slug }) => {
-            return (
-              <>
-                <NavigationItem
-                  key={slug}
-                  title={commTitle}
-                  isLearn={false}
-                  isRead={false}
-                  isActive={slug === pageKey}
-                  slug={slug}
-                  baseUrl="/"
-                />
-              </>
-            );
-          })}
-        </ul>
-      </nav>
-    </>
+    <nav className={className} ref={navElement}>
+      <button type="button" className="side-nav__open" onClick={toggle}>
+        Menu
+      </button>
+      <ul className="community-nav__list">
+        {aboutPageSideNavBarItem.map(({ title: commTitle, slug }) => {
+          return (
+            <NavigationItem
+              key={slug}
+              title={commTitle}
+              isLearn={false}
+              isRead={false}
+              isActive={slug === pageKey}
+              slug={slug}
+              baseUrl="/"
+            />
+          );
+        })}
+      </ul>
+    </nav>
   );
 }
diff --git a/src/components/BlogCard/index.tsx b/src/components/BlogCard/index.tsx
index fb316a38..6739aba4 100644
--- a/src/components/BlogCard/index.tsx
+++ b/src/components/BlogCard/index.tsx
@@ -25,7 +25,7 @@ const BlogCard = ({
       by{' '}
       {author &&
         author.map((user, i) => (
-          <Fragment key={user.id}>
+          <Fragment key={user.name}>
             <span>{user.name}</span>
             {getTerminatingString(i, author.length)}
           </Fragment>


Test patch:
diff --git a/test/components/__snapshots__/aboutPageSideNavBar.test.tsx.snap b/test/components/__snapshots__/aboutPageSideNavBar.test.tsx.snap
index 7fa12b29..0e643a17 100644
--- a/test/components/__snapshots__/aboutPageSideNavBar.test.tsx.snap
+++ b/test/components/__snapshots__/aboutPageSideNavBar.test.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`AboutPageSideNavBar renders correctly 1`] = `
 <div>
-   
   <nav
     class="side-nav-about"
   >
@@ -78,7 +77,6 @@ exports[`AboutPageSideNavBar renders correctly 1`] = `
 
 exports[`AboutPageSideNavBar should about Releases page exist and contain a href to \`~/release\` 1`] = `
 <div>
-   
   <nav
     class="side-nav-about"
   >
diff --git a/test/pages/__snapshots__/about.test.tsx.snap b/test/pages/__snapshots__/about.test.tsx.snap
index 04a28734..81652dfa 100644
--- a/test/pages/__snapshots__/about.test.tsx.snap
+++ b/test/pages/__snapshots__/about.test.tsx.snap
@@ -144,7 +144,6 @@ exports[`About page renders correctly 1`] = `
     <main
       class="streched-container"
     >
-       
       <nav
         class="side-nav-about"
       >
diff --git a/test/pages/__snapshots__/governance.test.tsx.snap b/test/pages/__snapshots__/governance.test.tsx.snap
index ca49dc17..15b6fd3f 100644
--- a/test/pages/__snapshots__/governance.test.tsx.snap
+++ b/test/pages/__snapshots__/governance.test.tsx.snap
@@ -144,7 +144,6 @@ exports[`Governance Page renders correctly 1`] = `
     <main
       class="streched-container"
     >
-       
       <nav
         class="side-nav-about"
       >
diff --git a/test/pages/__snapshots__/privacy.test.tsx.snap b/test/pages/__snapshots__/privacy.test.tsx.snap
index cf9d2adb..62d55b7f 100644
--- a/test/pages/__snapshots__/privacy.test.tsx.snap
+++ b/test/pages/__snapshots__/privacy.test.tsx.snap
@@ -144,7 +144,6 @@ exports[`Privacy Page renders correctly 1`] = `
     <main
       class="streched-container"
     >
-       
       <nav
         class="side-nav-about"
       >
diff --git a/test/pages/__snapshots__/resources.test.tsx.snap b/test/pages/__snapshots__/resources.test.tsx.snap
index 69a6448f..5a0143c1 100644
--- a/test/pages/__snapshots__/resources.test.tsx.snap
+++ b/test/pages/__snapshots__/resources.test.tsx.snap
@@ -144,7 +144,6 @@ exports[`About page renders correctly 1`] = `
     <main
       class="streched-container"
     >
-       
       <nav
         class="side-nav-about"
       >
diff --git a/test/pages/__snapshots__/trademark.test.tsx.snap b/test/pages/__snapshots__/trademark.test.tsx.snap
index 78ac746f..93847d07 100644
--- a/test/pages/__snapshots__/trademark.test.tsx.snap
+++ b/test/pages/__snapshots__/trademark.test.tsx.snap
@@ -144,7 +144,6 @@ exports[`Trademark page renders correctly 1`] = `
     <main
       class="streched-container"
     >
-       
       <nav
         class="side-nav-about"
       >