ReactJS: Dynamically update dropdown menu icon on hover

Question

First, I used the "antd" React framework and tailwindCSS just to practice ReactJS. Well, this is my first time using this framework. So I decided to first try using a dropdown popup on hover.

Actually, it’s not quite clear how to reach this stage. Of course I know that using CSS I can use "hover:" attr, but any ideas on using logic in ReactJS? Also, I tried reading the prop "API section for dropdown menus" without success. Even if I try to use onMouseEnter() as a prop in <Dropdown> I still can't get this.

I've shared this code and box to show the current status.

This is a codesandbox link

I want to change the icon of the dropdown menu on hover using <UpOutlined /> and <DownOutlined />, this is what I got from "@antd" in ReactJS /icons" to import content, I use tailwind CSS.

As expected, I want something like this: Hover menu demo for dummy website

Any help would be greatly appreciated, I've been trying to achieve this since yesterday :(

Answer 1

You can use the onOpenChange function on Dropdown to get the open status, see Dropdown props. You can use this to set some status of your own. Finally use this state to display different icons.

const [isOpen, setIsOpen] = useState(false);

return (
  
    
      Hover me, Click menu item
      {isOpen ?  : }
    
  
);