选项更改时重置 React select

Question

How to reset a react-select when the options is changed, this happen because im using chaining select, so my second select options will change based on my first select, what im trying to do is reset back the select to "please select" when my second option already picked before, im using react-select with react-hook-form

import React, { useState, useEffect } from 'react';
import { default as ReactSelect } from 'react-select';
import { FormGroup, Label } from 'reactstrap';
import { useFormContext, Controller } from 'react-hook-form';
import { ErrorMessage } from '@hookform/error-message';

export default function Select(props) {
    const {
        label,
        isMulti,
        note,
        // isDisabled,
        // withDefaultValue,
        options,
        isClearable,
        name,
        placeholder = 'Pilihan'
    } = props;

    const rhfContext = useFormContext(); // retrieve all hook methods
    const { control, errors } = rhfContext || {};
    const [elOptions, setElOptions] = useState([]);

    useEffect(() => {
        setElOptions(options);
    }, [options]);


    return (
        <FormGroup>
            {label && <Label htmlFor={name || ''}>{label}</Label>}
            <Controller
                as={ReactSelect}
                name={name}
                control={control}
                options={elOptions}
                placeholder={placeholder}
                styles={customStyles}
                {...(isMulti ? { isMulti: true } : {})}
                {...(isClearable ? { isClearable: true } : {})}
                classNamePrefix="react-select-pw"
                className="react-select-container"
            />
            {note && <span>{note}</span>}
            <ErrorMessage
                name={name}
                errors={errors}
                render={() => {
                    return <p className="err-msg">pilih salah satu</p>;
                }}
            />
        </FormGroup>
    );
}

Answer 1

Basically you need to handle the onChange of your react-select

const funcComponent = () => {
const [firstOptions, setFirstOptions] = useState({});
const [secondOptions, setSecondOptions] = useState({});
useEffect(() => {
    //Here dispatch your defined actions to load first select options
    setFirstOptions(response-data)
})

const handleFirstOptions = selectedVal => {
    //Here dispatch your defined action to load second select options
    setSecondOptions(response-data)
}

const handleSecondOptions = selectedVal => {
    //Your action to perform    
}


return (
    <Label>First Option Field</Label>
    <Select
              options={firstOptions}
              onChange={handleFirstOptions}
            />
    
    Label>Second Option Field</Label>
    <Select
              options={secondOptions}
              onChange={handleSecondOptions}
            />
)}