title: OnChange for Storing Value of Selected Drop Down Option
body: <p>I have a Material UI dropdown menu. I will make a search later on the basis of the selected option from the drop down menu. How exactly could I use <code>onChange()</code> to store the option selected? </p>
  
  <p>For now, I am trying to print the stored value (criteria) using typography at the end but instead of showing the selected value, I get a black page.</p>
  
  <pre><code>export default class userSearchPage extends Component&lt;{}, { searchItem: string, criteria: string }&gt;{
  
    constructor(props: Readonly&lt;{}&gt;) {
      super(props);
      this.state = {
        searchItem: '',
        criteria: '',
      };
      this.handleDropDownChange = this.handleDropDownChange.bind(this);
    }
  
    handleDropDownChange(selected: any) {
      this.setState({
          criteria: selected
      });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;PermanentDrawerLeft&gt;&lt;/PermanentDrawerLeft&gt;
          &lt;div className='main-content'&gt;
            &lt;MuiThemeProvider&gt;
              &lt;DropDownMenu onChange = {this.handleDropDownChange}&gt;
                &lt;MenuItem style={{ fontSize: "20px" }} primaryText="Search By" /&gt;
                &lt;MenuItem value={1} style={{ fontSize: "20px" }} primaryText="First Name" /&gt;
                &lt;MenuItem value={2} style={{ fontSize: "20px" }} primaryText="Last Name" /&gt;
                &lt;MenuItem value={3} style={{ fontSize: "20px" }} primaryText="Phone Number" /&gt;
                &lt;MenuItem value={4} style={{ fontSize: "20px" }} primaryText="Email" /&gt;
              &lt;/DropDownMenu&gt;
            &lt;/MuiThemeProvider&gt;
            &lt;Typography&gt;{this.state.criteria}&lt;/Typography&gt;
            &lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;
            &lt;SearchBar
              onChange={e =&gt; this.setState({ searchItem: e })}
              value = {this.state.searchItem}
              onRequestSearch={() =&gt; console.log('onRequestSearch')}
              style={{
                margin: '0 auto',
                maxWidth: 800
              }}
            /&gt;
             &lt;Typography&gt;{this.state.criteria}&lt;/Typography&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>How could I fix this? </p>
  
  <p><strong><em>Note: This is typescript</em></strong></p>
  
  <p>Added </p>
  
  <pre><code>export default class userSearchPage extends Component&lt;{}, { searchItem: string, criteria: any}&gt;{
  
    constructor(props: Readonly&lt;{}&gt;) {
      super(props);
      this.state = {
        searchItem: '',
        criteria: null, 
      };
      this.handleDropDownChange = this.handleDropDownChange.bind(this);
    }
  
  
    handleDropDownChange(event: any) {
      console.log(event.target.value);
      this.setState({
        criteria: event.target.value
      });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;PermanentDrawerLeft&gt;&lt;/PermanentDrawerLeft&gt;
          &lt;div className='main-content'&gt;
          &lt;InputLabel id="demo-simple-select-label"&gt;Search By&lt;/InputLabel&gt;
            &lt;Select
              value={this.state.criteria}
              onChange={this.handleDropDownChange}
              displayEmpty
            &gt;
              &lt;MenuItem disabled value="  "&gt;
                &lt;em&gt;Search By&lt;/em&gt;
              &lt;/MenuItem&gt;
              &lt;MenuItem value={1}&gt;First Name&lt;/MenuItem&gt;
              &lt;MenuItem value={2}&gt;Last Name&lt;/MenuItem&gt;
              &lt;MenuItem value={3}&gt;Phone Number&lt;/MenuItem&gt;
              &lt;MenuItem value={4}&gt;Email&lt;/MenuItem&gt;
            &lt;/Select&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>