Using RAC's TextField + React Hook Form

[thevipinmishra]

I was giving the TextField component a try, along with React Hook Form.

Now, adding the props returned by register function into the TextField component is not working as expected, I know this can easily be solved by spreading the props on the Input element that we nest under the TextField anyway, but was curious to know about the API and design decisions.

{name: 'companyName', onChange: ƒ, onBlur: ƒ, ref: ƒ}

Passing props to TextField shouldn't just work?

[eashish93]

Use Controller of react-hook-form like this:

<Controller
  name="url"
  control={control}
  render={({ field }) => (
    <TextField
      label="URL"
      {...field}
    />
  )}
/>

Using register with <TextField> is not working because onChange prop is different for both while using with Controller, it does match.

[hosmelq]

I'm doing the same.

[thevipinmishra]

Use Controller of react-hook-form like this:

<Controller
  name="url"
  control={control}
  render={({ field }) => (
    <TextField
      label="URL"
      {...field}
    />
  )}
/>

Using register with <TextField> is not working because onChange prop is different for both while using with Controller, it does match.

Any documentation?

I suppose, it was only for components which are meant to be Controlled only, like MUI.

[snowystinger]

you mean this https://react-hook-form.com/get-started/#IntegratingwithUIlibraries ?

[eashish93]

@thevipinmishra , also see this link to check controller onChange method: https://react-hook-form.com/docs/usecontroller/controller