How can I refactor this code?

Question

React

export const Leftbar = () => {
  const [isOpen, setIsOpen] = React.useState<'kids' | 'women' | 'men' | undefined>()
  const onMouseKidsEnter = () => {
    setIsOpen('kids')
  }

  const onMouseWomenEnter = () => {
    setIsOpen('women')
  }

  const onMouseMenEnter = () => {
    setIsOpen('men')
  }

  const onMouseLeave = () => {
    setIsOpen(undefined)
  }

  return (
    <React.Fragment>
      <LeftBar>
        <LeftBarItem onMouseEnter={onMouseKidsEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'kids'}>
          <span>Kids</span>
          <IoIosArrowBack />
        </LeftBarItem>
        <LeftBarItem onMouseEnter={onMouseWomenEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'women'}>
          <span>Women</span>
          <IoIosArrowBack />
        </LeftBarItem>
        <LeftBarItem onMouseEnter={onMouseMenEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'men'}>
          <span>Men</span>
          <IoIosArrowBack />
        </LeftBarItem>
      </LeftBar>

      <LeftbarDropdown
        activeMenu={isOpen === 'kids'}
        arrLinks={KidsLinks}
        onMouseEnter={onMouseKidsEnter}
        onMouseLeave={onMouseLeave}
        dropdownImg={dropdownKidsBg}
      />
      <LeftbarDropdown
        activeMenu={isOpen === 'women'}
        arrLinks={WomenLinks}
        onMouseEnter={onMouseWomenEnter}
        onMouseLeave={onMouseLeave}
        dropdownImg={dropdownWomenBg}
      />
      <LeftbarDropdown
        activeMenu={isOpen === 'men'}
        arrLinks={MenLinks}
        onMouseEnter={onMouseMenEnter}
        onMouseLeave={onMouseLeave}
        dropdownImg={dropdownMenBg}
      />
    </React.Fragment>
  )
}

interface LeftbarDropdownProps {
  activeMenu: boolean | undefined
  arrLinks: Array<HeroLinks>
  onMouseLeave: () => void
  onMouseEnter: () => void
  dropdownImg: string
}

const LeftbarDropdown: React.FC<LeftbarDropdownProps> = ({
  activeMenu,
  onMouseEnter,
  onMouseLeave,
  arrLinks,
  dropdownImg,
}): ReactElement => {
  return (
    <CSSTransition in={activeMenu} unmountOnExit timeout={500} classNames='dropdown'>
      <DropdownMenu onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} dropdownImg={dropdownImg}>
        {arrLinks.map((item, inx) => {
          return (
            <DropdownMenuLi>
              <DropdownMenuLink key={`dropdown-link-${inx}`} to={`${item.path}`}>
                {item.title}
              </DropdownMenuLink>
            </DropdownMenuLi>
          )
        })}
      </DropdownMenu>
    </CSSTransition>
  )
}

Answer 1

- const onMouseKidsEnter = () => {
-    setIsOpen('kids')
-  }
-  const onMouseWomenEnter = () => {
-    setIsOpen('women')
-  }
-  const onMouseMenEnter = () => {
-    setIsOpen('men')
-  }
+ const onMouseParamEnter = (param) => {
+  setIsOpen(param);
+ }

<LeftBar>
-       <LeftBarItem onMouseEnter={onMouseKidsEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'kids'}>
+ <LeftBarItem onMouseEnter={() => onMouseParamEnter('kids')} onMouseLeave={onMouseLeave} isOpen={isOpen === 'kids'}>
          <span>Kids</span>
          <IoIosArrowBack />
        </LeftBarItem>
-       <LeftBarItem onMouseEnter={onMouseWomenEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'women'}>
+ <LeftBarItem onMouseEnter={() => onMouseParamEnter('women')} onMouseLeave={onMouseLeave} isOpen={isOpen === 'women'}>
          <span>Women</span>
          <IoIosArrowBack />
        </LeftBarItem>
-        <LeftBarItem onMouseEnter={onMouseMenEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'men'}>
+ <LeftBarItem onMouseEnter={() => onMouseParamEnter('men')} onMouseLeave={onMouseLeave} isOpen={isOpen === 'men'}>
          <span>Men</span>
          <IoIosArrowBack />
        </LeftBarItem>
      </LeftBar>

Better yet, <LeftBarItem>put it in a separate component and pass the necessary props there with the kids/women/men parameter