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.

Answer 1

You could replicate this https://codepen.io/bsngr/pen/frDqh which uses the following JS

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

Or alternatively you could install a plugin like this https://github.com/CWSpear/bootstrap-hover-dropdown

EDIT: Perfectly fine solutions to bootstrap but I noticed now you said its react and I havent used that before but I dont see why the js above wouldnt work even if it requires tweaking