Getting values from react-select component in react-hook-form?

Question

I'm trying to use a react-select component inside of a form created using react-hook-form. I have followed the instructions from the react-hook-form website here, but when I submit the form the value from the select component is "" (the default value).

I know that the form is working in general because other values that are input with ref={register} work fine. It's just this one value that I'm using the Controller for. Am I missing a prop in the Select component or am I going wrong somewhere else?

I have a parent component where the form is defined:

<Form id="public-share-form" onSubmit={handleSubmit(onSubmit)}>
   <Controller
    as={<PublicShareNetworkSelect />}
    name="network"
    control={control}
    defaultValue=""
   />
</Form>

Then a child component for the react-select component used in the as prop of the Controller:

return (
   <Select
   closeMenuOnSelect={true}
   options={networks}
   noOptionsMessage={() => "No matching options"}
   defaultValue=""
   className="basic-single"
   classNamePrefix="select"
/>
);

Taghi Khavari · Accepted Answer · 2021-01-18 18:06:41Z

1

I think you need to use Select directly like this:

<Controller
  as={
    <Select
      closeMenuOnSelect={true}
      options={networks}
      noOptionsMessage={() => "No matching options"}
      defaultValue=""
      className="basic-single"
      classNamePrefix="select"
    />
  }
  name="network"
  control={control}
  defaultValue=""
/>

answered Jan 18, 2021 at 18:06

Taghi Khavari

6,6173 gold badges21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

userNick Over a year ago

So essentially I can't have the Select be embedded in a child function component?

Taghi Khavari Over a year ago

yep, not like your code, if you want to do so, I think you need to use forwardRef to pass the ref down to child component

userNick Over a year ago

Thanks...I just moved the Controller to the child component to keep everything clean and it works!

Collectives™ on Stack Overflow

Getting values from react-select component in react-hook-form?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related