React

React

export default class userSearchPage extends Component<{}, { searchItem: string }>{
  constructor(props: Readonly<{}>) {
    super(props);
    this.state = {
      searchItem: ''
      criteria: '',
      selectedItem: null
    };
    
    handleDropDownChange = this.handleDropDownChange.bind(this);
  }
  
  handleDropDownChange(selected) {
  	this.setState({
    	selectedItem: selected
    });
  }

  render() {
  	const { selectedItem } = this.state;
    
    return (
      <div>
        <div className='main-content'>
          <MuiThemeProvider>
            <DropDownMenu defaultSelected={selectedItem} onChange = {this.handleDropDownChange}>
              <MenuItem style={{ fontSize: "20px" }} primaryText="Search By" />
              <MenuItem value={1} style={{ fontSize: "20px" }} primaryText="First Name" />
              <MenuItem value={1} style={{ fontSize: "20px" }} primaryText="Last Name" />
              <MenuItem value={2} style={{ fontSize: "20px" }} primaryText="Phone Number" />
            </DropDownMenu>
          </MuiThemeProvider>
        </div>
      </div>
    );
  }
}