title: How to implement dropdown menu in React JS using Material UI?
body: <p>I have a dropdown which has a nested menu as shown below.</p>
  
  <p><a href="https://i.stack.imgur.com/FleC5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FleC5.png" alt="enter image description here"></a></p>
  
  <p>The dropdown upon expanding shows two options:</p>
  
  <p><a href="https://i.stack.imgur.com/jQlwN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jQlwN.png" alt="enter image description here"></a></p>
  
  <p>The problem is upon clicking any of the items the children options under Tenant Name or Dealer ID display for a second and disappear.
  How to solve this problem and next is how to store values which the user selects?</p>
  
  <p>My code is as follows:</p>
  
  <pre><code>   export default class DropDownMenuSimpleExample extends React.Component {
  
   constructor(props) {
  super(props);
  this.state = {
    dropDownData: [
      {
        value: '',
        tenantName: '',
        dealerId: '',
      },
    ],
  };
  }
  
  handleChange = (event, index, value) =&gt; {
      this.setState({ value });
      console.log(event, index, value);
   }
  
  render() {
   return (
  
    &lt;DropDownMenu
        style={styles.customWidth}
        anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
        targetOrigin={{ horizontal: 'left', vertical: 'top' }}
        className={{ backgroundcolor: '#CFD8DC' }}
  
    &gt;
  
      &lt;MenuItem
          value={this.state.value}
          onChange={this.handleChange}
          primaryText="TENANT NAME"
          rightIcon={&lt;ArrowDropRight /&gt;}
          menuItems={[
            &lt;MenuItem value={100} primaryText="CA-CAR" /&gt;,
            &lt;Divider /&gt;,
            &lt;MenuItem value={101} primaryText="TEKION" /&gt;,
          ]}
      /&gt;
  
      &lt;MenuItem
          value={this.state.value}
          onChange={this.handleChange}
          primaryText="DEALER ID"
          rightIcon={&lt;ArrowDropRight /&gt;}
          menuItems={[
            &lt;MenuItem value={1} primaryText="1" /&gt;,
            &lt;MenuItem value={2} primaryText="2" /&gt;,
            &lt;MenuItem value={3} primaryText="2" /&gt;,
            &lt;MenuItem value={4} primaryText="4" /&gt;,
          ]}
      /&gt;
    &lt;/DropDownMenu&gt;
    );
   }
  }
  </code></pre>