Display menu on hover reactjs

In a react application, I am using reactstrap css framework to make the dropdowns to list the dropdown menus.

Example.Js

      <Dropdown
        className="d-inline-block"
        onMouseOver={this.onMouseEnter}
        onMouseLeave={this.onMouseLeave}
        isOpen={this.state.dropdownOpen}
        toggle={this.toggle}
      >
        <DropdownToggle caret>Dropdown1</DropdownToggle>
        <DropdownMenu>
          <DropdownItem header>Submenu 1</DropdownItem>
          <DropdownItem>Submenu 1.1</DropdownItem>
        </DropdownMenu>
           
        <DropdownToggle caret>Dropdown2</DropdownToggle>
        <DropdownMenu>
          <DropdownItem header>Submenu 2</DropdownItem>
          <DropdownItem>Submenu 2.1</DropdownItem>
          <DropdownItem>Submenu 2.2</DropdownItem>
        </DropdownMenu>
           
        <br /><br />
        <DropdownToggle caret>Dropdown3</DropdownToggle>
        <DropdownMenu>
          <DropdownItem header>Submenu 3</DropdownItem>
          <DropdownItem>Submenu 3.1</DropdownItem>
          <DropdownItem>Submenu 3.2</DropdownItem>
          <DropdownItem>Submenu 3.3</DropdownItem>
        </DropdownMenu>
      </Dropdown>

Here I have made the setState to set the state for dropDownOpen in the events such as onMouseOver and onMouseLeave.

The issue is on hover of single dropdown menu, every dropdown gets opened.

Click here for Working Demo

Kindly help me to make the hover dropdown to only list the menus of hovered one and not all at a time.

Note: In my real application, these dropdown menus will be dynamic, So I cant make any hardcoded state like, dropDown1, dropDown2, dropDown3 ... etc ..

It may have any n number of dropdowns.. So please give me solution in keeping the dynamic menus into consideration.

Basically each dropdown menu needs to be in its own Dropdown composite component, with its own state and handlers. I forked and updated your demo that hopefully gives you the right idea.

<div>
<Dropdown
className="d-inline-block"
onMouseOver={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
isOpen={this.state.dropdownOpen1}
toggle={this.toggle1}
>
<DropdownToggle caret>Dropdown1</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Submenu 1</DropdownItem>
<DropdownItem>Submenu 1.1</DropdownItem>
</DropdownMenu>
   
</Dropdown>
<Dropdown
className="d-inline-block"
// onMouseOver={this.onMouseEnter}
// onMouseLeave={this.onMouseLeave}
isOpen={this.state.dropdownOpen2}
toggle={this.toggle2}
>
<DropdownToggle caret>Dropdown2</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Submenu 2</DropdownItem>
<DropdownItem>Submenu 2.1</DropdownItem>
<DropdownItem>Submenu 2.2</DropdownItem>
</DropdownMenu>
   
<br /><br />
</Dropdown>
<Dropdown
className="d-inline-block"
// onMouseOver={this.onMouseEnter}
// onMouseLeave={this.onMouseLeave}
isOpen={this.state.dropdownOpen3}
toggle={this.toggle3}
>
<DropdownToggle caret>Dropdown3</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Submenu 3</DropdownItem>
<DropdownItem>Submenu 3.1</DropdownItem>
<DropdownItem>Submenu 3.2</DropdownItem>
<DropdownItem>Submenu 3.3</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>

https://stackblitz.com/edit/reactstrap-v6-2dnzex?file=Example.js

Here is my solution to show the submenu of the menu or dropdown.
Feel free to ask any questions or if you have any confusion about it.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import React from 'react';
import { Box, jsx } from 'theme-ui';
import { Link } from 'gatsby';
import { H1 } from '../../components/ThemeHeader';
import { Image } from '../../components';
const CardWithCTALinks = (props) => {
const { cardWithCTALinksImage, ctaLinks, heading, bgColor } = props;
const [onCTAListHover, setOnCTAListHover] = React.useState({ status: '', indexAt: -1 });
const updateCTAListHover = (newOnCTAListHover, idx) => {
if (newOnCTAListHover !== onCTAListHover) setOnCTAListHover({ state: newOnCTAListHover, indexAt: idx });
};
const renderImageSection = (src, alt) => {
return <Image src={src} alt={alt} />;
};
const renderSubLinks = (subLinks, idx) => {
return (
<Box>
{idx === onCTAListHover.indexAt &&
subLinks.map((link) => (
<Link key={Math.random().toString(36).substring(7)} to="/">
{link.text}
</Link>
))}
</Box>
);
};
const renderLinksSection = (linksList, headingText) => {
return (
<Box>
{headingText && <H1>{headingText}</H1>}
{linksList && (
<Box>
{linksList.map((link, index) => (
<h1 onMouseEnter={() => updateCTAListHover(true, index)} onMouseLeave={() => updateCTAListHover(false, index)}>
{link.node?.title}
{link.node?.navItems.length > 0 && <>{onCTAListHover && renderSubLinks(link.node?.navItems, index)}</>}
</h1>
))}
</Box>
)}
</Box>
);
};
return (
<Box style={{ backgroundColor: bgColor }}>
{cardWithCTALinksImage && <Box>{renderImageSection(cardWithCTALinksImage?.asset._ref, 'alt')}</Box>}
{ctaLinks && heading && <Box>{renderLinksSection(ctaLinks.edges, heading)}</Box>}
</Box>
);
};
export default CardWithCTALinks;

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<!-- end snippet -->

 import React from "react";
import {
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem
} from "reactstrap";
export default class Example extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.onMouseEnter = this.onMouseEnter.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);
this.state = {
dropdownOpen1: false,
dropdownOpen2: false,
dropdownOpen3: false
};
}
toggle(id) {
this.setState({[id]:!this.state[`${id}`]})
}
onMouseEnter(id) {
this.setState({ [id]: true });
}
onMouseLeave(id) {
this.setState({ [id]: false });
}
render() {
return (
<div>
<Dropdown
className="d-inline-block"
onMouseOver={()=>this.onMouseEnter("dropdownOpen1")}
onMouseLeave={()=>this.onMouseLeave("dropdownOpen1")}
isOpen={this.state.dropdownOpen1}
toggle={()=>this.toggle("dropdownOpen1")}
>
<DropdownToggle caret>Dropdown1</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Submenu 1</DropdownItem>
<DropdownItem>Submenu 1.1</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown
className="d-inline-block"
onMouseOver={()=>this.onMouseEnter("dropdownOpen2")}
onMouseLeave={()=>this.onMouseLeave("dropdownOpen2")}
isOpen={this.state.dropdownOpen2}
toggle={()=>this.toggle("dropdownOpen2")}
>
   
<DropdownToggle caret>Dropdown2</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Submenu 2</DropdownItem>
<DropdownItem>Submenu 2.1</DropdownItem>
<DropdownItem>Submenu 2.2</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown
className="d-inline-block"
onMouseOver={()=>this.onMouseEnter("dropdownOpen3")}
onMouseLeave={()=>this.onMouseLeave("dropdownOpen3")}
isOpen={this.state.dropdownOpen3}
toggle={()=>this.toggle("dropdownOpen3")}
>
   
<br />
<br />
<DropdownToggle caret>Dropdown3</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Submenu 3</DropdownItem>
<DropdownItem>Submenu 3.1</DropdownItem>
<DropdownItem>Submenu 3.2</DropdownItem>
<DropdownItem>Submenu 3.3</DropdownItem>
</DropdownMenu>
</Dropdown> 
</div>
);
}
}

Try it out once !!!let me know,basically you need to pass different args for each dropdown ,so that your method can differentiate what to open or close.

Hi @TestUser and Drew Reese I have reduces some line using arrow functions: https://stackblitz.com/edit/reactstrap-dropdown?file=Example.js and if you need this for n dropdown then you can create single drop-down and using props you can create multiple dropdown for this (you can use map for repeating for this) and can use this multiple places. that is the beauty of react.

So basically you were using same state variable for all three dropdowns.

To fix this you need to maintain three different state variables, since you want to have dynamic way you can follow the below approach

Also for reusable approach you can make the Dropdown as a separate component.

You can add more logic if you want, this is the simple way to solve the problem

App.js

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { Container } from "reactstrap";
import CustomDropDown from "./CustomDropdown";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";
const dropdownConfig = [
{
customKey: 1,
options: [
{ title: "Submenu 1", header: true },
{ title: "Submenu 1.1", header: false }
],
name: "dropdownOpen1"
},
{
customKey: 2,
options: [
{ title: "Submenu 2", header: true },
{ title: "Submenu 2.1", header: false }
],
name: "dropdownOpen2"
},
{
customKey: 3,
options: [
{ title: "Submenu 3", header: true },
{ title: "Submenu 3.1", header: false }
],
name: "dropdownOpen3"
}
];
function App() {
const [keysForDropdown, setKeysForDropdown] = useState({});
useEffect(() => {
const keys = dropdownConfig.map(dropdown => dropdown.name);
const object = keys.reduce((acc, curr) => {
acc[curr] = false;
return acc;
}, {});
setKeysForDropdown({ ...object });
}, []);
const _handleToggle = e => {
setKeysForDropdown({
...keysForDropdown,
[e.target.name]: !keysForDropdown[e.target.name]
});
};
const _handleMouseEnter = e => {
setKeysForDropdown({
...keysForDropdown,
[e.target.name]: !keysForDropdown[e.target.name]
});
};
const _handleMouseLeave = e => {
setKeysForDropdown({
...keysForDropdown,
[e.target.name]: !keysForDropdown[e.target.name]
});
};
return (
<div className="App">
<Container>
{keysForDropdown &&
dropdownConfig.map(dropdown => (
<CustomDropDown
{...dropdown}
key={dropdown.customKey}
stateKeys={keysForDropdown}
handleToggle={_handleToggle}
handleMouseEnter={_handleMouseEnter}
handleMouseLeave={_handleMouseLeave}
/>
))}
</Container>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CustomDropdown.js

import React from "react";
import {
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem
} from "reactstrap";
const CustomDropDown = props => {
const {
handleMouseEnter,
handleMouseLeave,
handleToggle,
options,
name,
stateKeys
} = props;
return (
<div className="dropdown-container">
<Dropdown
className="d-inline-block"
onMouseOver={handleMouseEnter}
onMouseLeave={handleMouseLeave}
isOpen={stateKeys[name]}
toggle={handleToggle}
>
<DropdownToggle name={name} caret>
Dropdown1
</DropdownToggle>
<DropdownMenu>
{options.length &&
options.map(({ header, title }) => (
<DropdownItem header={header}>{title}</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
</div>
);
};
export default CustomDropDown;

Working codesandbox