Checkbox event is always undefined. React Hook Form controller not updating state immediately

Question

I'm using React Hook Form. I have a checkbox wrapped in Controller.

First problem is that onChange event always gives undefined
Second problem - before the first appeared (unfortunately I don't know after which change) it managed to work but I didn't know how to get current form state - it was updated only after resetting or submitting the form. As you can see I have added a validation rule to the checkbox. I need to enable submit button based on that checkbox so I need to have a current formState immediately.

<Controller
                        render={({ field: { onChange, value } }) => (
                            <Checkbox
                                // checked={value}
                                onChange={(e) => {
                                    console.log(e.value);
                                    onChange(e.value);
                                   // this print undefined                                
                                }}
                            >
                                Some text
                            </Checkbox>)}
                        control={control} // this changes nothing
                        defaultValue={false} // I've tried also with default values passed to the FormProvider
                        name='checkbox'
                        rules={{
                            validate: (value: boolean) => value
                        }} />

write e.target.checked like onChange={(e) => onChange(e.target.checked)} instead of e.value. (*looks like you are using MUI for the Checkbox) — Khairani F
– Khairani F, Commented May 15, 2023 at 14:46
I'm using something similar to MUI and I've checked that e.value is what I need. In other cases when I'm using this checkbox onChange={onChange} is working — Aggat
– Aggat, Commented May 15, 2023 at 16:23

Aggat · Accepted Answer · 2023-05-18 07:53:08Z

0

I've figured out that problem is that this checkbox needs string as a value, not a boolean

    <Controller
                        control={control}
                        render={({ field }) => (
                            <Checkbox {...field}
                                checked={field.value}
                                value={field.value as unknown as string}
                            >Text
                            </Checkbox>)}
                        defaultValue={false}
                        name='checkbox'
                        rules={{
                            validate: (value: boolean) => value
                        }} />

answered May 18, 2023 at 7:53

Aggat

731 silver badge8 bronze badges

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

1 Comment

vidur punj Over a year ago

The value do not update of the checkbox.

Collectives™ on Stack Overflow

Checkbox event is always undefined. React Hook Form controller not updating state immediately

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related