Question

0

281

Views

React-hook-form: unable to successfully implement MUI Select component

I'm trying to create a wrapper around the MUI Select component, and while I've found some solutions that seem to be really close to working. They simply don't and I'm not sure why.

I've attached a picture of the error plus the related code. Any ideas how to get around this?

source template I'm trying to use

error message

my controller

<FormControl>
  <Controller
    name="sourceLanguage"
    rules={{ required: 'this is required' }}
    control={control}
    defaultValue={sourceLanguage}
    as={
      <Select>
        <MenuItem value="">None</MenuItem>
        <MenuItem value="fr">French</MenuItem>
        <MenuItem value="es">Spanish</MenuItem>
      </Select>
    }
  />
</FormControl>

useForm hook

  const {
    control,
    handleSubmit,
    getValues,
    formState: { errors },
  } = useForm<dynamicFormState>({});

related state

export interface dynamicFormState {
  title: string;
  description: string;
  contentId: string;
  sourceURL: string;
  sourceLanguage: string;
  targetLanguage: string;
  author?: IYoutubeAuthor;
  content?: IYoutubeContent;
}

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-13T07:50:31.984Z

It seems you're mixing RHF's v6 and v7. Your <Controller /> component uses v6 syntax with the as prop, while you're probably using v7 as a dependency in your project (therefore the TS error noting that as is not a property of <Controller />). Write your <Controller /> using the render prop instead of as should fix the error.

<FormControl>
  <Controller
    name="sourceLanguage"
    rules={{ required: 'this is required' }}
    control={control}
    defaultValue={sourceLanguage}
    render={({ field }) => (
      <Select {...field}>
        <MenuItem value="">None</MenuItem>
        <MenuItem value="fr">French</MenuItem>
        <MenuItem value="es">Spanish</MenuItem>
      </Select>  
    )}
  />
</FormControl>

0

281