From 2027db4f69873ef2d49d7802a81cba4079769d43 Mon Sep 17 00:00:00 2001
From: Ben Zhang <ben-z@users.noreply.github.com>
Date: Mon, 23 Sep 2024 13:40:31 -0700
Subject: [PATCH] Fix JSX child key warning (#3235)

## Description

This PR fixes the following warning:
```
Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <dl>. See https://reactjs.org/link/warning-keys for more information.
    at Avatar (webpack-internal:///./components/blog-post.tsx:49:19)
    at div
    at div
    at div
    at div
    at BlogPostHeader (webpack-internal:///./components/blog-post.tsx:187:90)
    at main
    at article
    at Body (webpack-internal:///./node_modules/nextra-theme-docs/dist/index.js:2922:3)
    at ActiveAnchorProvider (webpack-internal:///./node_modules/nextra-theme-docs/dist/index.js:155:3)
    at div
    at div
    at InnerLayout (webpack-internal:///./node_modules/nextra-theme-docs/dist/index.js:2973:3)
    at m (webpack-internal:///./node_modules/nextra-theme-docs/node_modules/next-themes/dist/index.js:1:335)
    at exports.ThemeProvider (webpack-internal:///./node_modules/nextra-theme-docs/node_modules/next-themes/dist/index.js:1:3636)
    at ConfigProvider (webpack-internal:///./node_modules/nextra-theme-docs/dist/index.js:261:3)
    at Layout (webpack-internal:///./node_modules/nextra-theme-docs/dist/index.js:3092:5)
    at Object.apply (/home/ben/Projects/infra-config/website/node_modules/@sentry/nextjs/cjs/common/wrapPageComponentWithSentry.js:63:21)
    at App (webpack-internal:///./components/_app_custom.tsx:46:16)
    at MDXContent
    at StyleRegistry (/home/ben/Projects/infra-config/website/node_modules/styled-jsx/dist/index/index.js:449:36)
    at ek (/home/ben/Projects/infra-config/website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:30:13126)
    at eY (/home/ben/Projects/infra-config/website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:39:1766)
    at eV (/home/ben/Projects/infra-config/website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:39:3110)
    at div
    at e1 (/home/ben/Projects/infra-config/website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:48:761)
```

`<Fragment></Fragment>` is equivalent to `<></>`. The `key` prop is
documented here: https://react.dev/reference/react/Fragment#props


## Checklist
- [x] I have read and understood the [WATcloud
Guidelines](https://cloud.watonomous.ca/docs/community-docs/watcloud/guidelines)
- [x] I have performed a self-review of my code
---
 components/blog-post.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/blog-post.tsx b/components/blog-post.tsx
index 6b3b229..16cb5ef 100644
--- a/components/blog-post.tsx
+++ b/components/blog-post.tsx
@@ -10,7 +10,7 @@ import { dayjsTz } from '@/lib/utils';
 import { GithubIcon, LinkIcon, LinkedinIcon, MailIcon, XIcon } from 'lucide-react';
 import { useRouter } from 'next/router';
 import { Link, useConfig } from "nextra-theme-docs";
-import React from 'react';
+import React, { Fragment } from 'react';
 import { SubscribeDialog } from './blog';
 import Picture from './picture';
 
@@ -67,7 +67,7 @@ export function Avatar({ username }: { username: string }) {
                         sr = "twitter";
                     }
                     return (
-                        <>
+                        <Fragment key={link}>
                             <dt className="sr-only">{sr}</dt>
                             <dd className="inline-block">
                                 <Link
@@ -78,7 +78,7 @@ export function Avatar({ username }: { username: string }) {
                                     {icon}
                                 </Link>
                             </dd>
-                        </>
+                        </Fragment>
                     )
                 })}
             </dl>