How can I disabled sub menu item in react? - reactjs

Question

I create a menu with React.js. But there is a problem for me. There is 2 sub menus and these sub menus have their menu items. When I hover one of them it shows its menu items. But when I click another sub menu, it still shows previous menu items. How can I prevent it ? My code:
My first class : Sider.js
function Sider(props) {
return (
<Menu mode="horizontal">
selectedKeys={[props.current]}
onClick={props.handleClick}
<SubMenu title={<span><Icon type="setting" />Sub menu 1</span>}>
<MenuItem> menu item 1</MenuItem>
<MenuItem> menu item 2</MenuItem>
</SubMenu>
<SubMenu title={<span><Icon type="laptop" />Sub menu 2</span>}>
<MenuItem> menu item 3</MenuItem>
</SubMenu>
</Menu>
);
}
This is my main class which I call Sider function.
Main.js :
import PropTypes from 'prop-types';
class Main extends React.Component {
constructor(props) {
super(props)
this.state = {
current: 'MenuItem'
}
}
handleClick = (e) => {
this.setState({
current: e.key,
});
}
render() {
return (
<div>
<Sider navigation={this.props.navigation} handleClick={this.props.handleClick} current={this.state.current />
</div>
);
}
}
Main.propTypes = {
handleClick: PropTypes.func,
};

Answer 1

You can use key to maintain active state of selected sub menu and use selectedKeys. see the working code below
I have made working menu in codeopen here codepen
import PropTypes from 'prop-types';
class App extends React.Component {
state = {
current: 'menu1:1',
}
handleClick = (e) => {
this.setState({
current: e.key,
});
}
render() {
return (
<div>
<Sider navigation={this.props.navigation} handleClick={this.handeClick} current={this.state.current} />
</div>
);
}
}
App.propTypes = {
handleClick: PropTypes.func,
};
And your Sider function will be like below
function Sider(props) {
return (
<Menu onClick={props.handleClick} selectedKeys={[props.current]}>
<SubMenu title={<span><Icon type="setting" />Sub menu 1</span>}>
<MenuItem key="setting:1"> menu item 1</MenuItem>
<MenuItem key="setting:2"> menu item 2</MenuItem>
</SubMenu>
<SubMenu title={<span><Icon type="laptop" />Sub menu 2</span>}>
<MenuItem key="laptop:1"> menu item 3</MenuItem>
</SubMenu>
</Menu>
);
}
For documentations please read horizontal menu and Vertical Menu

Answer 2

How did you implement the hovering mechanism? Please add more code.
Do you change the inner state of each SubMenu when you hover out?
You should better read the documentation for antd's components.
Go to the following link to better understand how to use these components.