How do I call onChange from the register function?

[thany]

I'm making a custom field, namely a checkbox list. Not a totally alien thing to build. Its value is an array of strings.

So when I pass it the destructed register function:

<MyInput label="Pizza toppings" {...register('toppings')} />

How is MyInput expected to call the onChange function that is now passed into the component?

I've tried numerous ways to give it a target, a value, both, neither, I feel like I've tried everything.

Looking at the code, it blindly expects a target and a target.name. So just passing onChange(newValue) isn't going to cut the mustard - it wants a event.target.name given event is the first argument. Even though this is hinted in the documented when using a Controller component. But I'm not. I find it too verbose.

So what do I actually call onChange with please?

[tejasae-afk]

You need to pass a synthetic event shape: onChange({ target: { name: "toppings", value: newValue } }). The register handler reads event.target.name and event.target.value so that is the minimum it needs.

That said, for custom multi-value inputs like a checkbox list, Controller is actually the cleaner path once you try it. It gives you field.onChange(value) directly without the event wrapping:

<Controller
  name="toppings"
  control={control}
  render={({ field }) => (
    <MyInput
      label="Pizza toppings"
      value={field.value}
      onChange={field.onChange}
    />
  )}
/>

No event object needed, no wrapping. Worth the extra lines.