Question

66

How to reset select dropdown values in react

rated 0 times [ 69] [ 3] / answers: 1 / hits: 24790 / 5 Years ago, wed, august 14, 2019, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tristani

Add To Favorites

Follow

Total Points: 318

Total Questions: 95

Total Answers: 106

Location: Saint Lucia

Member since Wed, Feb 8, 2023

1 Year ago

answered 5 Years ago ansleyk · Accepted Answer

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