Si está utilizando react-select , puede intentar pasar null a value prop.

Por ejemplo:

 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"));

Aquí hay un ejemplo de trabajo de esto.

Me encontré con este problema yo mismo y logré solucionarlo pasando una key al componente React-Select, con el valor seleccionado adjunto. Esto obligará a ReactSelect a volver a renderizarse cuando se actualice la selección.

Espero que esto ayude a alguien.

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

Puede borrar el valor de la selección de reacción usando la 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> ); }

Aquí está el enlace CodeSandbox