fix: pass unique id to menu items

getezy · Nov 6, 2022 · dc7bca6 · dc7bca6
1 parent b9c4ddd
commit dc7bca6
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/src/app/components/menu/menu-item.tsx b/src/app/components/menu/menu-item.tsx
@@ -46,7 +46,7 @@ const IconWrapper = styled('div', {
 });
 
 export type MenuItemData = {
-  key: string;
+  id: string;
 
   icon: React.ReactElement;
 
@@ -58,8 +58,8 @@ export type MenuItemProps = MenuItemData & {
   onClick?: () => void;
 } & VariantProps<typeof StyledMenuItem>;
 
-export const MenuItem: React.FC<MenuItemProps> = ({ key, icon, active = false, onClick }) => (
-  <StyledMenuItem key={key} active={active} onClick={onClick}>
+export const MenuItem: React.FC<MenuItemProps> = ({ id, icon, active = false, onClick }) => (
+  <StyledMenuItem key={id} active={active} onClick={onClick}>
     <IconWrapper active={active}>{icon}</IconWrapper>
   </StyledMenuItem>
 );
diff --git a/src/app/components/menu/menu.tsx b/src/app/components/menu/menu.tsx
@@ -1,4 +1,5 @@
 import { styled } from '@nextui-org/react';
+import { nanoid } from 'nanoid';
 import React from 'react';
 
 import { MenuItem, MenuItemData } from './menu-item';
@@ -65,8 +66,7 @@ export const Menu: React.FC<MenuProps> = ({
   isCollapsed = false,
   onCollapseChange,
 }) => {
-  // const [isCollapsed, setIsCollapsed] = React.useState(true);
-  const [activeItem, setActiveItem] = React.useState<string>(items[0].key);
+  const [activeItem, setActiveItem] = React.useState<string>(items[0].id);
 
   const handleMenuItemClick = (index: string) => {
     if (index === activeItem && onCollapseChange) {
@@ -76,7 +76,7 @@ export const Menu: React.FC<MenuProps> = ({
     }
   };
 
-  const submenu = items.find((item) => item.key === activeItem)?.submenu;
+  const submenu = items.find((item) => item.id === activeItem)?.submenu;
 
   return (
     <>
@@ -85,9 +85,10 @@ export const Menu: React.FC<MenuProps> = ({
         {items.map((item) => (
           <MenuItem
             {...item}
-            active={item.key === activeItem}
+            key={nanoid()}
+            active={item.id === activeItem}
             onClick={() => {
-              handleMenuItemClick(item.key);
+              handleMenuItemClick(item.id);
             }}
           />
         ))}

diff --git a/src/app/pages/side-bar/side-bar.tsx b/src/app/pages/side-bar/side-bar.tsx
@@ -63,7 +63,7 @@ export const SideBar: React.FC = () => {
     <Menu
       items={[
         {
-          key: 'Collections',
+          id: 'Collections',
           icon: <EzyIcon />,
           submenu: collections,
         },