How to programmatically clear/reset React-Select?

If you're using react-select you can try to pass null to value prop.

For example:

import React from "react";import { render } from "react-dom";import Select from "react-select";class App extends React.Component {  constructor(props) {    super(props);    const options = [      { value: "one", label: "One" },      { value: "two", label: "Two" }    ];    this.state = {      select: {        value: options[0], // "One" as initial value for react-select        options // all available options      }    };  }  setValue = value => {    this.setState(prevState => ({      select: {        ...prevState.select,        value      }    }));  };  handleChange = value => {    this.setValue(value);  };  handleClick = () => {    this.setValue(null); // here we reset value  };  render() {    const { select } = this.state;    return (      <div>        <p>          <button type="button" onClick={this.handleClick}>            Reset value          </button>        </p>        <Select          name="form-field-name"          value={select.value}          onChange={this.handleChange}          options={select.options}        />      </div>    );  }}render(<App />, document.getElementById("root"));

Here's a working example of this.

I came across this problem myself and managed to fix it by passing a key to the React-Select component, with the selected value appended to it. This will then force the ReactSelect to re-render itself when the selection is updated.

I hope this helps someone.

import ReactSelect from 'react-select';...<ReactSelect  key={`my_unique_select_key__${selected}`}  value={selected || ''}  .../>

You can clear the value of react select using the ref.

import React, { useRef } from "react";import Select from "react-select";export default function App() {  const selectInputRef = useRef();  const onClear = () => {    selectInputRef.current.select.clearValue();  };  return (    <div className="App">      <h1>Select Gender</h1>      <Select        ref={selectInputRef}        options={[          { value: "male", label: "Male" },          { value: "female", label: "Female" }        ]}      />      <button onClick={onClear}>Clear Value</button>    </div>  );}

Here is the CodeSandbox link