React checkbox not initialy taking value of object

Question

I have a project where I need to use a checkbox. My data comes from a database and gets injected in an state object. This object contains a list of children and each child contains a boolean called 'xmasCamp2019'. But the first time this code gets rendered the checkbox doesn't take over the value of the boolean.

But when I do a log of the boolean it outputs true. When the onChange is called the boolean of that child is swapped and then the checkbox does gets checked.

{this.state.selectedRegistration.childrenArray.map((child) => {
            console.log(child.xmasCamp2019);
            return (
              <FormControlLabel
                key={child.index}
                value={child.xmasCamp2019}
                onChange={(event, value) =>
                  this.selectChild(child.index, value)
                }
                control={
                  <Checkbox name="Insurance" value={child.xmasCamp2019} />
                }
                label={child.name}
              />
            );
          })}

knada · Accepted Answer · 2020-10-07 14:39:22Z

1

What does the <Checkbox /> component look like? Checkboxes in react use the checked attribute for storing boolean state, example <input type="checkbox" checked={xmasCamp2019} />

answered Oct 7, 2020 at 14:39

knada

3441 silver badge5 bronze badges

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

1 Comment

Stephen Over a year ago

Thank you. I thought it was the value that needed to be set in stead of checked.

Collectives™ on Stack Overflow

React checkbox not initialy taking value of object

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