How can I make react-bootstrap's Dropdown open on mouse hover?

export class Nav extends React.Component {  constructor(props) {    super(props)    this.state = { isOpen: false }  }  handleOpen = () => {    this.setState({ isOpen: true })  }  handleClose = () => {     this.setState({ isOpen: false })  }  render() {    return (       <Nav>        <NavDropdown          onMouseEnter = { this.handleOpen }          onMouseLeave = { this.handleClose }          open={ this.state.isOpen }          noCaret          id="language-switcher-container"        >          <MenuItem>Only one Item</MenuItem>        </NavDropdown>      </Nav>    )  }}

Hope this solves your issue.

A much cleaner pure CSS solution here:

.dropdown:hover .dropdown-menu { display: block;}

Having just run into this issue myself, I found out you need both the bootstrap CSS and a parameter for react-bootstrap. Add the following CSS:

.dropdown:hover>.dropdown-menu {  display: block;}

Then you need to add the parameter renderMenuOnMount={true} for the child elements to render on load:

<NavDropdown renderMenuOnMount={true}>  <NavDropdown.Item href="#">Item #1</NavDropdown.Item></NavDropdown>