How to make a 'Select' component as required in Material UI (React JS)

Question

I want to display like an error with red color unless there is a selected option. Is there any way to do it.

Answer 1

For setting a required Select field with Material UI, you can do:

class SimpleSelect extends React.PureComponent {
  state = {
    selected: null,
    hasError: false
  }

  handleChange(value) {
    this.setState({ selected: value });
  }

  handleClick() {
    this.setState(state => ({ hasError: !state.selected }));
  }

  render() {
    const { classes } = this.props;
    const { selected, hasError } = this.state;

    return (
      

        
          
            Name
          
           this.handleChange(event.target.value)}
            input={}
          >
            Hai
            Olivier
            Kevin
          
          {hasError && This is required!}
        
         this.handleClick()}>
          Submit
        
      
    );
  }
}

Working Demo on CodeSandBox