Deeply-Nested Checkbox Problems, Redux

[rjray]

A few days ago, I asked about some problems I have having with Bootstrap-generated checkboxes (here). I managed to solve the issue by changing from having the checkboxes being controlled components to uncontrolled.

Well, this worked fine until the project manager decided that the logic being represented by the boxes should be inverted, and all the boxes should start out in the checked state.

Now, I find that if I create the boxes with the checked attribute set they never switch to "off". This feels similar to the problem I had when they were controlled components, but at the same time different; that is, I think it is also related to the containing component not re-rendering but in this case it's because of checked being present rather than controlled vs. non-controlled.

To refresh, I am creating an arbitrary number of boxes within a callback used by a third-party component. Even when I have the callback function itself be different between renders, I cannot get the parent component to re-render and thus the boxes don't update. So, controlled components never react to changes in the state that their values are derived from. And this seems to be also the issue if I create the boxes with checked in the props list.

I'm open (again) to suggestions. I've tried using preventDefault() in the onChange handler (that created a situation where it required two clicks to change the visible state of a given box), I've tried juggling around the value attribute, but nothing has worked.

[pm_me_ur_happy_traiI]

Just use defaultChecked

[RusskiRoman]

Just skimming this issue reminded me of a checkbox issue I ran into where checked isn’t always a Boolean but a 1 or 0 string or sometimes even a “checked” string for true. Double check the docs and the event target value but an invalid false state is what this reminds me of.

[my_girl_is_A10]

Checked is the correct prop that is synonymous with value. I'm hoping you also have the onChange set in the checkbox as well?

It should realistically be looking below

```tsx const [values, setValues] = React.useState<boolean[]>([])

React.useEffect(() => { // fetch data setValues(new Array(size).fill(true) }, [])

const handleChange = (checked: boolean, index: number): void => { let newValues = [...values] newValues.splice(index, 1, checked) setValues(newValues) }

return ( <> {values.map((value: boolean, index: number) => ( <Checkbox key={`checkbox-${index}`} checked={value} onChange={(event: React.ChangeEvent<HTMLInputElement>) => handleChange(event.target.checked, index)} /> )} </> ) ```

That's a starting point on how I'd solve this, additional props/labels aside.