Typescript with React Hook Form and React-select Multiple selected value not submitted by the form

Question

I am using react hook form and react select with typescript . Its works fine for single selected value. But when I choose isMulti for multiple selected value , I am unable to get the value from the submitted form . Here is the code

 interface ITopic {
  value: string;
  label: string;
}

...........

const topicOptions : ITopic[] = [
    { value: 'javascript', label: 'JAVASCRIPT' },
    { value: 'php', label: 'PHP' },
    { value: 'python', label: 'PYTHON' },
    { value: 'java', label:'JAVA' },
    { value: 'C#', label: 'C#' }
]

type TopicType = { label: string, value: string }

const [selectedTopic, setSelectedTopic] = useState<readonly ITopic[]>([]);

..........

<Controller
   control={control}
   render={({ field: { onChange, value, name, ref } }) =>{
   const handleSelectionChange = (topicOptions: readonly SelectOptionType[]) => {
   setSelectedTopic(topicOptions)
   console.log(selectedTopic)
  }
   return  (
      <Select
      isMulti
      name={name}
      value={selectedTopic}
      options={topicOptions} 
      onChange={handleSelectionChange}
      />
  )}}
  name="topics"
/>

I am getting empty topics value. Need Help. Thank you.

Jérémy Rippert · Accepted Answer · 2022-12-19 15:12:46Z

2

First, if you are using react-hook-form to manage your form, you shouldn't in addition have useState for your variable.

What you want to do instead is to use onChange from the Controller's render method.

For instance, my multi select code is (assuming topicOptions is an array of TopicType: { label:string; value:string })

      <Controller
        control={control}
        name="topics"
        render={({ field: { onChange, value } }) => (
          <Select
            isMulti
            name="topics"
            options={topicOptions}
            value={topicOptions.filter((el) => value?.includes(el.value))}
            onChange={(option: TopicType[] | null) => {
              if (option === null) {
                onChange(null);

                return;
              }

              onChange(option.map((el) => el.value));
            }}
          />
        )}
      />

edited Dec 19, 2022 at 15:12

answered Dec 15, 2022 at 11:22

Jérémy Rippert

3031 silver badge10 bronze badges

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

5 Comments

PSA Over a year ago

value={topicOptions.filter((el) => value?.includes(el.value))} showing error Argument of type 'string' is not assignable to parameter of type 'never'

PSA Over a year ago

I fixed that never issue by in my default values defaultValues: {topics:[""]}

PSA Over a year ago

Thanks a lot . Your answer is really helpful . Just need to modify few things , under <Controller control={control} name={"topics"} // here I give the name and more importantly in the onChange it should be (val: readonly {label:string; value:string;}[] | null) as react-select.com/typescript documentation says, If you have a multi-select you can type onChange like this: const onChange = (option: readonly Option[], actionMeta: ActionMeta<Option>) => { ... }

Jérémy Rippert Over a year ago

@PSA I edited my answer based on your comment. Glad my answer helped!

PSA Over a year ago

Yeah ! Just one thing , ... option: readonly Option[] , here Option[] is the type of the options . Here for my topicOptions , I have used type TopicType = { label: string, value: string }. I have updated my question . You were right as you assumed topicOptions is an array of { label:string; value:string }). Please update the answer with, Option[], with TopicType[], it will be helpful for the others . Thank You again . Happy Coding .

Collectives™ on Stack Overflow

Typescript with React Hook Form and React-select Multiple selected value not submitted by the form

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related