title: How can I disabled sub menu item in react?
body: <p>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:</p>
  
  <p>My first class : Sider.js</p>
  
  <pre><code>function Sider(props) {
    return (
       &lt;Menu mode="horizontal"&gt;
       selectedKeys={[props.current]}
       onClick={props.handleClick}
         &lt;SubMenu title={&lt;span&gt;&lt;Icon type="setting" /&gt;Sub menu 1&lt;/span&gt;}&gt;
           &lt;MenuItem&gt; menu item 1&lt;/MenuItem&gt;
           &lt;MenuItem&gt; menu item 2&lt;/MenuItem&gt;
         &lt;/SubMenu&gt;
         &lt;SubMenu title={&lt;span&gt;&lt;Icon type="laptop" /&gt;Sub menu 2&lt;/span&gt;}&gt;
           &lt;MenuItem&gt; menu item 3&lt;/MenuItem&gt;
         &lt;/SubMenu&gt;
       &lt;/Menu&gt;
    );
  }
  </code></pre>
  
  <p>This is my main class which I call Sider function.</p>
  
  <p>Main.js : </p>
  
  <pre><code>import PropTypes from 'prop-types';
  
  class Main extends React.Component {
     constructor(props) {
        super(props)
        this.state = {
           current: 'MenuItem'
        }
     }
  
     handleClick = (e) =&gt; {
        this.setState({
           current: e.key,
        });
     }
  
     render() {
       return (
          &lt;div&gt;
            &lt;Sider navigation={this.props.navigation} handleClick={this.props.handleClick} current={this.state.current /&gt;
          &lt;/div&gt;
       );
     }
  }
  
  Main.propTypes = {
     handleClick: PropTypes.func,
  };
  </code></pre>