Fix React warning about unique "key" prop

I always get a react warning: Warning: Each child in a list should have a unique "key" prop.

This fixed it and makes for warning-free development 😊
This commit is contained in:
marcchehab
2024-01-04 14:14:49 +01:00
committed by GitHub
parent 8a4ec39d25
commit 9e73410b17

View File

@@ -46,8 +46,8 @@ export const SiteToc: React.FC<Props> = ({ currentPath, nav }) => {
return ( return (
<nav data-testid="lhs-sidebar" className="flex flex-col space-y-3 text-sm"> <nav data-testid="lhs-sidebar" className="flex flex-col space-y-3 text-sm">
{sortNavGroupChildren(nav).map((n) => ( {sortNavGroupChildren(nav).map((n, index) => (
<NavComponent item={n} isActive={false} /> <NavComponent key={index} item={n} isActive={false} />
))} ))}
</nav> </nav>
); );
@@ -96,8 +96,8 @@ const NavComponent: React.FC<{
leaveTo="transform scale-95 opacity-0" leaveTo="transform scale-95 opacity-0"
> >
<Disclosure.Panel className="flex flex-col space-y-3 pl-5 mt-3"> <Disclosure.Panel className="flex flex-col space-y-3 pl-5 mt-3">
{sortNavGroupChildren(item.children).map((subItem) => ( {sortNavGroupChildren(item.children).map((subItem, index) => (
<NavComponent item={subItem} isActive={false} /> <NavComponent key={index} item={subItem} isActive={false} />
))} ))}
</Disclosure.Panel> </Disclosure.Panel>
</Transition> </Transition>