CODEWITHSUNDEEP
javascriptreactjsreact-selectreact-hook-form
heliowx
heliowx

Reputation: 43

React Hook Form with AsyncSelect from React-Select

working on an issue with the react-select AsyncSelect component that loads options from an API.But I can't pass the information to React-Hook Form through the controller.AsyncSelect works perfectly. The data goes back well in my "SelelectedValue" state. Can anyone help me ?

    const [inputValue, setValue] = useState('');
    const [selectedValue, setSelectedValue] = useState(null);
    // handle input change event
    const handleInputChange = value => {
        setValue(value);
    };
    // handle selection
    const handleChange = value => {
        setSelectedValue(value);
    }

const loadOptions = async (inputValue, callback) => {
 
        const response = await fetch(`APIurl`);
        const json = await response.json();
        const object = json.records;
        callback(object.map(i => ({ label: `${i.fields.firstName} - ${i.fields.lasName} , value: i.fields.firstName })))
    }

<Controller
   name="company"
   control={control}
   rules={{ required: true }}
   render={({ field: { onChange, value } }) => (
       <AsyncSelect
         isClearable
         value={selectedValue}
         placeholder={'Your information'}
         loadOptions={loadOptions}
         onInputChange={handleInputChange}
         onChange={handleChange}
         styles={customStyles}
       />)}
/>

Upvotes: 4

Views: 7908

Answers (1)

Mic Fung
Mic Fung

Reputation: 5692

react-hook-form manages some common event and state (like value, onChange, onBlur etc.) for you so there is no need to define your own state in most case except onInputChange in AsyncSelect.

You can try to select the option and submit the form.

<Controller
    name="company"
    control={control}
    rules={{ required: true }}
    render={({ field }) => (
    <AsyncSelect
        {...field}
        isClearable
        defaultOptions
        placeholder={"Your information"}
        loadOptions={loadOptions}
        onInputChange={handleInputChange}
        // styles={customStyles}
    />
    )}
/>

Here is the codesandbox

Upvotes: 3

Related Questions