Utilizing React JS in my current project involves a two-level menu system. Upon hovering over a menu item, the corresponding sub-menu should appear and disappear when the mouse leaves the area. However, a challenge arises when all sub-menus appear simultaneously due to a single shared state. I am seeking guidance on implementing a dynamic state that enables only the relevant sub-menu to display upon hover.
The 'App.js' file contains:
// Code snippet
The 'App.css' file includes styling rules such as:
.container{
background-color: #eee;
height: 40px;
}
.main__items{
display: flex;
position: relative;
}
.main__item{
margin: 0 20px;
cursor: pointer;
}The 'Sub.js' file is crucial for rendering sub-menu items based on user interaction:
// Code snippet
The 'Sub.css' file dictates the appearance of the sub-menu items:
.sub__items{
position: absolute;
top: 40px;
background-color: bisque;
}
.sub__item{
margin: 10px;
}Your insights or assistance would be highly appreciated.