I'm trying to use server response data to create my country and province select component. first, the user chooses the country. Then we send a request to the server with the selected country id, get the country's provinces, and then re-render the province's select component with new data. finally, I submit the form but show the error country is a required field. I'm adding to the country select component (onChange) and saving the selected country id in the state but it does not solve this issue. below is my select option component code:
<RHFSelect value={selects.country} name="country" label="Country" placeholder="Country" onChange={(e) => handleCountrySelect(e.target.value)}>
<option value="" />
{countries.map((option) => (
<option key={option.id} value={option.id}>
{option.name}
</option>
))}
</RHFSelect>
my state
const [selects, setSelects] = useState({
country: undefined,
province: undefined
});
on change handler function
const handleCountrySelect = (id) => {
setSelects((props) => ({ ...props, country: id }));
getProvince(id);
};
I'm using minimal dashboard source code and it's for handling the form using react-hook-form
const methods = useForm({
resolver: yupResolver(UpdateUserSchema),
defaultValues,
});
use react-select if possible. https://react-select.com/home and here is the example how to use
<Select closeMenuOnSelect={false}
isMulti as="select"
options={options}
value={options.filter(obj =>
selectedValue.includes(obj.value))} // set selected values
onChange={handleChange}/>
const [selectedValue, setSelectedValue] = useState([]);
const handleChange = (e) => {
setSelectedValue(Array.isArray(e) ? e.map(x => x.value) : []);
}
console.log(selectedValue)