CODEWITHSUNDEEP
reactjsreact-selectreact-hook-form
userNick
userNick

Reputation: 623

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

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"
/>
);

Upvotes: 3

Views: 2036

Answers (1)

Taghi Khavari
Taghi Khavari

Reputation: 6582

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=""
/>

Upvotes: 1

Related Questions