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

Question

Ok the question is simple. I need to make the dropdown open when mouse hover rather than on click.

Currently my code is as follow.

    <Nav>
      <NavDropdown
        onMouseEnter = {()=> isOpen=true}
        open={isOpen}
        noCaret
        id="language-switcher-container"
      >
        <MenuItem>Only one Item</MenuItem>
      </NavDropdown>
    </Nav>

as you can see, I tried onMouseEnter but no effect. Can someone solve this issue? What attribute should I pass in to achive this.

The API page is here react-bootstrap API page

Answer 1

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.

Answer 2

A much cleaner pure CSS solution here:

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