1

I need to make the dropdown open and load the dropdown items when mouse hover rather than on click.

Currently my code is as follows:

function Navigation(){

  const [isOpen, setIsOpen] = useState(false);
  return (
    <Nav className="ml-auto">
        <NavDropdown
          title="About"
          onMouseEnter={() => setIsOpen(true)}
          onMouseLeave={() => setIsOpen(false)}
          show={isOpen}
        >
          <NavDropdown.Item href="#action/1.1">Who we are</NavDropdown.Item>
          <NavDropdown.Item href="#action/2.2">
            How we work
          </NavDropdown.Item>
          <NavDropdown.Item href="#action/2.2">
            Certifications
          </NavDropdown.Item>
        </NavDropdown>

        <NavDropdown
          title="Services"
          onMouseEnter={() => setIsOpen(true)}
          onMouseLeave={() => setIsOpen(false)}
          show={isOpen}
        >
          <NavDropdown.Item href="#action/2.1">
            Cloud Digital Transformation
          </NavDropdown.Item>
          <NavDropdown.Item href="#action/2.2">
            Expert Cloud Advise and Support
          </NavDropdown.Item>
          <NavDropdown.Item href="#action/2.3">
            Software Development
          </NavDropdown.Item>
          <NavDropdown.Item href="#action/2.4">
            Dedicated Teams
          </NavDropdown.Item>
        </NavDropdown>

        <NavDropdown
          title="Contact"
          onMouseEnter={() => setIsOpen(true)}
          onMouseLeave={() => setIsOpen(false)}
          show={isOpen}
        >
          <NavDropdown.Item href="#sales">Sales</NavDropdown.Item>
          <NavDropdown.Item href="#support">Support</NavDropdown.Item>
        </NavDropdown>
      </Nav>
  )
}

However, when I hover over the items in the navbar, all the items from all three navdropdown is shown at the same time when I hover the mouse over any of them. Can anyone assist me with the solution? What attribute should I pass in to achieve that?

Pratima Gautam
  • 317
  • 1
  • 6
  • 21
  • 3
    Does this answer your question? [How can I make react-bootstrap's Dropdown open on mouse hover?](https://stackoverflow.com/questions/43010814/how-can-i-make-react-bootstraps-dropdown-open-on-mouse-hover) – Titulum Feb 11 '20 at 07:25
  • @Titulum I am using the functional component, how can I achieve the same on it? – Pratima Gautam Feb 11 '20 at 07:27
  • @Titulum I have three separate NavDropdown, when I hover my mouse over any of the menu items, all of the menu items are displayed. – Pratima Gautam Feb 11 '20 at 10:57
  • It is because they are all watching the same variable. You should create a new question for this, as this was not the original scope of the question. – Titulum Feb 11 '20 at 11:19
  • @Titulum Okay, got it. I created a separate state variable for all the three different NavDropDown and it worked. Is there any other shortcuts and alternative beside that? – Pratima Gautam Feb 11 '20 at 11:52
  • Yes, that's it! There is a better way, you can create an object that keeps track of state in a better way. If you create a new question I'll show you how to do so! – Titulum Feb 11 '20 at 11:58
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/207588/discussion-between-proselenos-and-titulum). – Pratima Gautam Feb 11 '20 at 12:12

1 Answers1

1

You should refactor your functional component like this:

function Navigation() {

  const [shouldOpen, show] = useState(false);

  return (
    <NavDropdown 
       title="About"
       onMouseEnter = { () => show(true) }
       onMouseLeave = { () => show(false) }
       show={ this.shouldOpen }>
      <NavDropdown.Item href="#action/1.1">Who we are</NavDropdown.Item>
      <NavDropdown.Item href="#action/2.2">
        How we work
      </NavDropdown.Item>
      <NavDropdown.Item href="#action/2.2">
        Certifications
      </NavDropdown.Item>
    </NavDropdown>
  )
}
Titulum
  • 9,928
  • 11
  • 41
  • 79