Merge pull request #130 from SSWConsulting/fix-unique_key_prop_error

Fixing using "key" pro error appearing in Rules POC while implementing mega.menu package

Author: PothieuG

lib/components/DesktopMenu/DesktopMenu.tsx

@@ -40,36 +40,28 @@ const DesktopMenu: React.FC<DesktopMenuProps> = ({
               group.sidebarItems.length > 0
             ) {
               return (
-                <Popover key={group.name}>
-                  {({ open, close }) => {
-                    {
-                      /* TODO: Duplicated check needed here to appease Typescript */
-                    }
-                    if (!group.menuColumns || !group.sidebarItems) return <></>;
-                    return (
-                      <MenuContextProvider value={{ close }}>
-                        <MenuItemWithSubmenu
-                          name={group.name}
-                          menuColumns={group.menuColumns}
-                          sidebarItems={group.sidebarItems}
-                          isOpened={open}
-                          viewAll={group.viewAll}
-                        />
-                      </MenuContextProvider>
-                    );
-                  }}
+                <Popover key={`popover-${group.name}`}>
+                  {({ open, close }) => (
+                    <MenuContextProvider value={{ close }}>
+                      <MenuItemWithSubmenu
+                        name={group.name}
+                        menuColumns={group.menuColumns!}
+                        sidebarItems={group.sidebarItems!}
+                        isOpened={open}
+                        viewAll={group.viewAll}
+                      />
+                    </MenuContextProvider>
+                  )}
                 </Popover>
               );
             } else if (group.url) {
               return (
                 <MenuItemLink
                   name={group.name}
                   href={group.url}
-                  key={group.name}
+                  key={`link-${group.name}`}
                 />
               );
-            } else {
-              return <></>;
             }
           })}
         </Popover.Group>

lib/components/MobileMenu/MobileMenu.tsx

@@ -17,7 +17,6 @@ export interface MobileMenuProps extends SearchTermProps {
 const MobileMenu: React.FC<MobileMenuProps> = ({
   menuBarItems,
   isMobileMenuOpen,
-
   closeMobileMenu,
   setSearchTerm,
   searchTerm,
@@ -83,6 +82,7 @@ interface MenuBarItemProps extends SearchTermProps {
   menuBarItems: NavMenuGroup[];
   setSelectedMenuItem: (item: NavMenuGroup) => void;
 }
+
 const MenuBarItems: React.FC<MenuBarItemProps> = ({
   menuBarItems,
   setSelectedMenuItem,
@@ -95,18 +95,18 @@ const MenuBarItems: React.FC<MenuBarItemProps> = ({
   return (
     <div className="-my-6 flex flex-col gap-4 pl-6">
       <div className="space-y-2">
-        {menuBarItems.map((item) => {
+        {menuBarItems.map((item, index) => {
           return item.url ? (
             <CustomLink
-              key={item.name}
+              key={`link-${item.name}-${index}`}
               href={item.url}
               className="-mx-3 flex w-full items-center px-3 py-2 text-left text-lg leading-7 text-ssw-black hover:text-ssw-red"
             >
               {item.name}
             </CustomLink>
           ) : (
             <button
-              key={item.name}
+              key={`button-${item.name}-${index}`}
               className="-mx-3 flex w-full items-center px-3 py-2 text-left text-lg leading-7 text-ssw-black hover:text-ssw-red"
               onClick={() => setSelectedMenuItem(item)}
             >