How To Reset Select Dropdown Values In React

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 val

Solution 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

Solution 2:

Functional component version of the above answer would be

import logo from"./logo.svg";
import"./App.css";
import { useState } from"react";

functionApp() {
  const [data] = useState([1, 2, 3, 4]);
  const [selected, setSelected] = useState("");

  return (
    <divclassName="App"><headerclassName="App-header"><imgsrc={logo}className="App-logo"alt="logo" /><p>
          React <code> SELECT RESET </code> demo.
        </p><selectvalue={selected}onChange={(e) => setSelected(e.target.value)}>
          <option>Select</option>
          {data &&
            data.map((d, index) => {
              return <optionkey={index}>{d}</option>;
            })}
        </select><br /><buttononClick={() => setSelected("")}>Clear</button></header></div>
  );
}

exportdefaultApp;