react navbar change it to onmouseover instead of click - reactjs

Question

I wanted to load react navbar submenu on mouseover instead of click.
https://react-bootstrap.github.io/components/navbar/
import { Nav,NavDropdown,Navbar } from "react-bootstrap";
<Navbar bg="light" expand="lg">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav>
<NavDropdown title="Beneficiary" id="basic-nav-dropdown" className="Dropdown">
<NavDropdown.Item onClick={() => this.recordList('Approved List',this.state.approvedRecords)}>Approved</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item onClick={() => this.recordList('Rejected List',this.state.rejectedRecords)}>Rejected</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item onClick={() => this.recordList('Referred Back List',this.state.refBackRecords)}>Referback</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
Any help would be appreciated.

Answer 1

Here, I played with it for a minute
so as I first suggested we would add a local const and a function for handling dropdown visibility
const [visible, setVisible] = useState(false);
const handleHover = () => {
setVisible((prevVisible) => (prevVisible = !prevVisible));
};
And then simply
<Navbar.Collapse id="basic-navbar-nav" onMouseEnter={handleHover}>
<Nav>
<NavDropdown
title="Beneficiary"
id="basic-nav-dropdown"
className="Dropdown"
show={visible}
>
...
As I suspected you'll have to handle the mouseleave event as well, so far in my function
setVisible((prevVisible) => (prevVisible = !prevVisible));
we're toggling the visibility on mouseenter, but you get the gist :)
LMK if I can help any further, or if you come across a better solution

Answer 2

Well, according to their docs, that cannot be done out of the box..
You could add your own function to NavDropdown on Mouseenter.. Provided you're using react hooks it would be something like
const [isDropdownVisible, setDropdownVisible] = useState(false);
const handleHover = () => {
setDropdownVisible(true)
}
Of course you'll have to set submenu to be visible={isDropdownVisible}
and then on a parent you could just say onmouseenter={handleHover}
You might have to handle onmouseleave as well, I'm not sure.
Hope this will be a valuable guideline :)
Good luck