How to reset select dropdown values in react

Question

I have one html dropdown select control and I have added first option value as Select. There are several other options to select from dropdown. Now I want to reset the dropdown values and set it back to Select.

How I can do it in React?

Here is my code

<select className="form-control" ref="Auditee" name="Auditee" onChange={this.handleChange.bind(this)}>
                <option>Select</option>
                {this.renderAuditee()}
              </select>
<button type="button" className="btn btn-primary" onClick={this.handleClear}>Clear</button>



renderAuditee(){
  let Auditeefiltered = this.state.review1data.map(element=> element.EEECPM).filter((value, index, self) => self.indexOf(value) === index)

  return Auditeefiltered.map(element=>
   <option>{element.toString().replace(/\[.*?\]/,'')}</option>
  )
}


handleClear(e){
 e.preventDefault();

    this.setState({
        filterData:[],
        filter: false
 });

I don't know how I should Reset the select dropdown. Any help would be helpful

Answer 1

Your select should be controlled.

You need to have a state variable for selected value.

state ={
   selected:''
}

And the controlled select should be,

<select className="form-control" value={this.state.selected} name="Auditee" onChange={this.handleChange.bind(this)}>
    <option>Select</option>
    {this.renderAuditee()}
</select>

handleChange = (e) => {
   this.setState({selected:e.target.value})
}

And finally to clear select,

handleClear = (e) => {
   this.setState({selected:""})
}

Demo