'react select reset input
I'm using react select and i want to reset the input with reset button. The selected value return undefined but the option still appear in the box. I want when click in the reset button clear the selected option . My Select component :
import React from "react";
import ReactSelect from "react-select";
const Select = ({
name,
options,
value,
className,
isMulti,
onChange,
}) => {
let defaultValue;
if (!Array.isArray(value) && (value || value == "")) {
for (let { value: val, label } of options) {
if (val == value) {
defaultValue = { value, label };
break;
}
}
} else {
defaultValue = value;
}
let props = {
inputId: name + "-input",
id: name,
name,
options,
defaultValue,
};
return (
<ReactSelect
onChange={onChange}
{...props}
/>
);
};
export default Select;
I call this component in my form
import React,{useState} from "react";
funtion Form (){
const [values,setValues] = useState({});
return (
<div>
<Select
options={options}
value={values.color}
onChange={(e) => {
setValues({ ...values, color: e});
}}
/>
<button onClick={()=> setValues({})}></button>
</div>
)
}
Any help please.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
