CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Shinne
Shinne

Reputation: 65

Material UI Checkbox not toggling on and off

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.

Upvotes: 1

Views: 1585

Answers (1)

Shinne
Shinne

Reputation: 65

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.

Upvotes: 1

Related Questions