Im not exactly sure what's going on because in the Material UI docs, it seems pretty simple, but I can't get my checkbox to toggle either on or off after I create the component.
const createCheckBox = (row, checkBoxStatus, changeStatus) => {
let text = "";
if (row.values.map((value, index) => {
text += value.title
}))
if (text) {
return (
<Checkbox checked />
)
} else {
return (
<Checkbox checked={false} disabled />
)
}
}
I'm creating new checkboxes for a set number of rows. Each row has a text value, and there's text, I want to be able to toggle the row's checkbox on or off, but if there's no text, I want the box to be disabled and not checked marked.
I weird thing is, that if I remove the checked from the true portion of the code, i can toggle the checkbox but can't when I set it.
I don't know why but after I ask these questions I'm usually able to figure it out myself after asking them.
Here's what I got.
I set the true condition to this
<Checkbox defaultChecked />
But then it gave me this error.
MUI: A component is changing the default checked state of an uncontrolled SwitchBase after being initialized. To suppress this warning opt to use a controlled SwitchBase.
Only for it to give so I changed the checkbox to this.
<Checkbox value={row.name + "_checkbox"} defaultChecked />
Then it gave me some error about not having a key so I added a key to the checkbox
<Checkbox key={row.name + "_checkbox_key"} value={row.name + "_checkbox"} defaultChecked />
Now everything works the way I wanted it to work.