fix menu items warnings

- add unique key for each menu item - resolve warning about menuitems with child buttons
boxwise · Jul 6, 2023 · 8c68585 · 8c68585
1 parent 35f4280
commit 8c68585
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/react/src/components/HeaderMenu/HeaderMenu.tsx b/react/src/components/HeaderMenu/HeaderMenu.tsx
@@ -37,9 +37,7 @@ export interface LoginOrUserMenuButtonProps extends UserMenuProps {
 
 export interface MenuItemsGroupProps extends MenuItemsGroupData {}
 
-export interface MenuItemsGroupsProps
-  extends LoginOrUserMenuButtonProps,
-    LayoutProps {
+export interface MenuItemsGroupsProps extends LoginOrUserMenuButtonProps, LayoutProps {
   menuItemsGroups: MenuItemsGroupData[];
 }
 

diff --git a/react/src/components/HeaderMenu/HeaderMenuContainer.tsx b/react/src/components/HeaderMenu/HeaderMenuContainer.tsx
@@ -1,7 +1,6 @@
 import { useContext, useMemo, useState } from "react";
 import { useAuth0 } from "@auth0/auth0-react";
 import HeaderMenu, { MenuItemsGroupData } from "./HeaderMenu";
-import { useDisclosure } from "@chakra-ui/react";
 import { GlobalPreferencesContext } from "providers/GlobalPreferencesProvider";
 import QrReaderOverlay from "components/QrReaderOverlay/QrReaderOverlay";
 import { qrReaderOverlayVar } from "queries/cache";
@@ -22,7 +21,10 @@ const HeaderMenuContainer = () => {
             link: `${process.env.REACT_APP_OLD_APP_BASE_URL}/mobile.php`,
             name: "Go to classic mobile",
           },
-          { link: `${process.env.REACT_APP_OLD_APP_BASE_URL}/`, name: "Go to classic desktop" },
+          {
+            link: `${process.env.REACT_APP_OLD_APP_BASE_URL}/`,
+            name: "Go to classic desktop",
+          },
         ],
       },
       // {
@@ -94,11 +96,11 @@ const HeaderMenuContainer = () => {
         menuItemsGroups={menuItems}
         currentActiveBaseId={baseId}
         availableBases={globalPreferences.availableBases}
-        onClickScanQrCode={() => qrReaderOverlayVar({isOpen: true})}
+        onClickScanQrCode={() => qrReaderOverlayVar({ isOpen: true })}
       />
       <QrReaderOverlay
         isOpen={qrReaderOverlayState.isOpen}
-        onClose={() => qrReaderOverlayVar({isOpen: false})}
+        onClose={() => qrReaderOverlayVar({ isOpen: false })}
       />
     </>
   );

diff --git a/react/src/components/HeaderMenu/HeaderMenuMobile.tsx b/react/src/components/HeaderMenu/HeaderMenuMobile.tsx
@@ -59,12 +59,13 @@ const LoginOrUserMenuButtonMobile = ({
   const { isOpen, onToggle } = useDisclosure();
 
   return isAuthenticated ? (
-    <MenuItem onClick={handleLogout}>
+    <MenuItem onClick={handleLogout} key="logout-menu">
       <Text fontWeight="bold">Logout {user?.email}</Text>
     </MenuItem>
   ) : (
-    <MenuItem>
+    <MenuItem as="button" key="login-menu">
       <Button
+        as="div"
         py={2}
         colorScheme="gray"
         borderRadius="0px"
@@ -109,7 +110,7 @@ const MenuItemsGroupsMobile = ({
   return (
     <>
       <MenuList>
-        <MenuItem>
+        <MenuItem as="div" key="qr-code-menu">
           <Flex
             px={4}
             border="1px"
@@ -144,7 +145,11 @@ const MenuItemsGroupsMobile = ({
         </MenuItem>
 
         {props.menuItemsGroups.map((item, i) => (
-          <MenuItemsGroupMobile key={i} {...item} setIsMenuOpen={setIsMenuOpen} />
+          <MenuItemsGroupMobile
+            key={`menu-${i.toString()}`}
+            {...item}
+            setIsMenuOpen={setIsMenuOpen}
+          />
         ))}
 
         <LoginOrUserMenuButtonMobile
@@ -176,7 +181,7 @@ const MenuItemsGroupMobile = ({
     if (link.link.includes(`${process.env.REACT_APP_OLD_APP_BASE_URL}`)) {
       // Since we are forwarding to an external url we need to use the a tag
       return (
-        <MenuItem>
+        <MenuItem key={link.name}>
           <Box
             as="a"
             href={generateDropappUrl(link.link, baseId, qrCode, labelIdentifier)}
@@ -191,7 +196,7 @@ const MenuItemsGroupMobile = ({
       );
     } else {
       return (
-        <MenuItem>
+        <MenuItem key={link.name}>
           <Box as={NavLink} to={link.link} key={i} py={1} px={4} w="100%">
             {link.name}
           </Box>