Question 185542 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to use react-select with react-hook-form in typescript

I have a form

<Form onSubmit={handleSubmit(applyFilter)}>
    <FormLabel>Organization</FormLabel>
         <Controller 
          name="Units" 
          control={control} 
          render={({ field }) =>
          <Select 
            {...field} 
             placeholder={translate("Select organization")} 
             options={filterModel.data?.units.map(unit => 
                        { return { label: unit.name, value: unit.id } })} 
             isMulti 
             closeMenuOnSelect={false} 
           />
          }/>
</Form>

But i have an error when i try to set options – type "{ label: string; value: number; }[] | not specified" cannot be specified for the type "OptionsOrGroups<string, GroupBase<string>> | undefined".

can you help me with this type?

Tags:

2

Answers


  1. 0

    You need the imports like this,

    import { useForm, Controller } from 'react-hook-form';
import Select from 'react-select';

    Then your hook component can be like this,

    <form onSubmit={handleSubmit(() => {})}>
        <div>
          <label>First name</label>
          <Controller
            control={control}
            name="firstName"
            rules={{ required: true }}
            render={renderProps => {
              const { ref, ...rest } = renderProps.field;

              return (
                <Select
                  options={[{ label: 'Jack', value: '1' }, { label: 'Lisa', value: '2' }]}
                  menuPlacement="auto"              
                  isSearchable={false}
                  menuPortalTarget={document.body} menuPosition="fixed"
                  {...register('firstName')}
                  {...renderProps.field}
                  onChange={e => {
                    console.log(e);
                    renderProps.field.onChange(e);
                  }}
                  
                />
              );
            }}
          />
        </div>

        <input type="submit" />
      </form>
    Login or Signup to reply.
  2. 0

    This looks like a very general question, but to use react-select with react-hook-form in TypeScript, you need to follow these steps.
    Make sure you have the following packages installed in your project:

    npm install react-select react-hook-form @hookform/resolvers yup

    Set up the form and form validation

    import { useForm, Controller } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

    Define the form schema using yup for validation:

    const schema = yup.object().shape({
  selectField: yup.string().required('This field is required'),
});

    Initialize the form and apply the form resolver:

    const { handleSubmit, control, formState: { errors } } = useForm({
  resolver: yupResolver(schema),
});

    Add the react-select component

    import Select from 'react-select';

    Add the Select component to your form:

    <form onSubmit={handleSubmit(onSubmit)}>
  <Controller
    name="selectField"
    control={control}
    defaultValue=""
    render={({ field }) => (
      <Select
        {...field}
        options={options} // Replace with your options array
      />
    )}
  />
  {errors.selectField && <p>{errors.selectField.message}</p>}
  <button type="submit">Submit</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search