fix(ui-react): use guaranteed value for BreadCrumbs key (#4442)

aws-amplify · Sep 14, 2023 · 7e11a3b · 7e11a3b
1 parent 717b009
commit 7e11a3b
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/modern-melons-doubt.md b/.changeset/modern-melons-doubt.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix(ui-react): use guaranteed value for BreadCrumbs key
diff --git a/docs/src/pages/[platform]/components/breadcrumbs/examples/BreadcrumbsStyleExample.tsx b/docs/src/pages/[platform]/components/breadcrumbs/examples/BreadcrumbsStyleExample.tsx
@@ -22,8 +22,8 @@ export default function BreadcrumbsStyleExample() {
       borderRadius="medium"
       padding="medium"
     >
-      {breadcrumbs.map(({ href, text, isCurrent }) => (
-        <Breadcrumbs.Item key={href}>
+      {breadcrumbs.map(({ href, text, isCurrent }, idx) => (
+        <Breadcrumbs.Item key={`${href}${idx}`}>
           <Breadcrumbs.Link
             fontWeight="bold"
             textDecoration="underline"

diff --git a/packages/react/src/primitives/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/primitives/Breadcrumbs/Breadcrumbs.tsx
@@ -28,7 +28,7 @@ const BreadcrumbsPrimitive: Primitive<BreadcrumbsProps, 'nav'> = (
       {items?.map(({ href, label }, idx) => {
         const isCurrent = items.length - 1 === idx;
         return (
-          <BreadcrumbItem key={href}>
+          <BreadcrumbItem key={`${href}${idx}`}>
             <BreadcrumbLink href={href} isCurrent={isCurrent}>
               {label}
             </BreadcrumbLink>