Update form state inside onChange based on which checkbox the user has selected

[RSchneider94]

Hey folks,

Sandbox

I have to take an action based on which checkbox the user has chosen and then update the form based on that. So I have a form that looks like this:

Then, whenever the user selects, e.g. "Manage" in case it has "View" selected before, I need to deselect "View" because with "Manage" user already has "View" right. I think you know what I mean. I have tried to make use of useEffect + watch + setValue but as the react-hooks linter warns about the need to add them as deps, you know what happens, infinite loop. So I'm wondering how it would be possible to achieve what I need. Because as the docs states, for the onChange inside Controller:

This prop update formState and you should avoid manually invoke setValue or other API related to field update

Any help would be very welcome!

Thanks!

[leapful]

@RSchneider94 : The logic can be simplified by just using custom "onChange" for CheckboxGroup component.

For example:

<CheckboxGroup
                onChange={(e) => {
                  if (
                    e.includes("view-documents") &&
                    e.includes("manage-documents")
                  ) {
                    onChange(["manage-documents"]);
                  } else {
                    onChange(e);
                  }
                }}
                {...newField}
              >

Working demo: https://codesandbox.io/s/nervous-saha-80b1ho?file=/src/App.tsx

[RSchneider94]

@RSchneider94 : The logic can be simplified by just using custom "onChange" for CheckboxGroup component.

For example:

<CheckboxGroup
                onChange={(e) => {
                  if (
                    e.includes("view-documents") &&
                    e.includes("manage-documents")
                  ) {
                    onChange(["manage-documents"]);
                  } else {
                    onChange(e);
                  }
                }}
                {...newField}
              >

Working demo: https://codesandbox.io/s/nervous-saha-80b1ho?file=/src/App.tsx

hey @leapful , thanks! that's awesome! didn't know that I could send an array in the onChange event like that, cool!

[liel-almog]

Just to be sure, when creating an input component and using a custom 'onChnage; we need to use the field.onChange and pass than our value?

const handleChange: AntInputNumberProps['onChange'] = (val: any) => {
        if (isNaN(Number(val))) {
            field.onChange(null);
            return;
        }
        field.onChange(+val);
    };

Like this?