How do I control input checkbox "checked" state with React?

Question

I am working on an application that has a form and radio buttons.

For one of the radio buttons, it has an option that can be toggled on/off with a checkbox.

I want the checkbox to be disabled if the respective radio button is NOT selected, its default behavior to work when is it active, and for it to be disabled AND unchecked if a different radio button is then selected.

I have gotten all of those behaviors to work, but React is throwing an exception that says,

app-index.js:31 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

My "working" solution:

 const [checkboxActive, setCheckboxActive] = useState<boolean | undefined>(false);

 const handleOptionClick = (option?: string) => {
    setSelected(true);
    if (option) {
      setEveryOtherLetterSelected(true);
      setCheckboxActive(undefined);
    } else {
      setEveryOtherLetterSelected(false);
      setCheckboxActive(false);
    }
  }

<input type="checkbox" name="first" disabled={everyOtherLetterSelected ? false : true} checked={checkboxActive} />

From this thread (Setting a checkbox "check" property in React), I see that this is a weird thing with React and checkbox type inputs where its "checked" value is either a boolean or undefined. I have tried putting the "!!" in front of the condition (!!checkboxActive), but that changes the behavior.

Is there a more acceptable way to do this where React won't yell at me?

Edit:

I have tried the !! operator in different places, like everywhere I had an "undefined" value. I also messed around with no undefined values for the checkbox and all undefined, but to no avail.

@MichaelLiu Yes, when I put the !! in front of checkboxActive like !!checkboxActive, the box is uncheckable even when it is active. — letmeeatbrioche
– letmeeatbrioche, Commented Oct 22, 2023 at 17:50
Try adding an onClick handler to the checkbox that updates the value of checkboxActive. — Michael Liu
– Michael Liu, Commented Oct 22, 2023 at 22:13
@MichaelLiu Hi, Michael, this did not work for me, unfortunately. It makes the warning go away, but it doesn't uncheck the checkbox when a different radio button is selected. I did use this onClick idea for another idea though, so thank you, and thank you for the help in the first place. — letmeeatbrioche
– letmeeatbrioche, Commented Oct 24, 2023 at 0:29
To uncheck the checkbox, call setCheckboxActive(false) when the other radio button is selected. — Michael Liu
– Michael Liu, Commented Oct 24, 2023 at 4:04

aw4lly · Accepted Answer · 2023-10-23 22:15:05Z

-1

maybe try this: checked={checkboxActive === undefined ? false : checkboxActive}

edited Oct 23, 2023 at 22:15

aw4lly

2,1651 gold badge14 silver badges20 bronze badges

answered Oct 23, 2023 at 14:28

Paulina

12 bronze badges

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

1 Comment

letmeeatbrioche Over a year ago

Thank you so much for this, but unfortunately this makes the active checkbox not "checkable".

Collectives™ on Stack Overflow

How do I control input checkbox "checked" state with React?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related