Making a React Bootstrap NavDropdown dropdown when hovered over

Question

I'm trying to have a dropdown menu bar in React Bootstrap show the options when you hover over it. I've looked everywhere and all the solutions seem out of date and not to work, please let me know if you are able to solve this problem.

Here is the dropdown menu I am trying to apply the change to:

<Navbar>
  <NavDropdown title="Dropdown Menu">
    <NavDropdown.Item href="#action/3.1">Option 1</NavDropdown.Item>
    <NavDropdown.Item href="#action/3.1">Option 2</NavDropdown.Item>
  </NavDropdown>
</Navbar>

and here is a sandbox of the above code.

Answer 1

You can use show prop

import React, { Component, Fragment, useState } from "react";
import ReactDOM from "react-dom";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";

const Header = props => {
  const [show, setShow] = useState(false);
  return (
    <Navbar>
      <NavDropdown
        title="Dropdown Menu"
        show={show}
        onMouseEnter={() => setShow(true)}
        onMouseLeave={() => setShow(false)}
      >
        <NavDropdown.Item href="#action/3.1">Option 1</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.1">Option 2</NavDropdown.Item>
      </NavDropdown>
    </Navbar>
  );
};

function App() {
  return <Header />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

check here codeSandBox

Answer 2

CSS Solution: You just need to add renderMenuOnMount={true} on your NavDropdown element like this:

<NavDropdown title={name} id={name} renderMenuOnMount={true}>
...menu items...
</NavDropdown>

And in CSS:

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