mardi 30 juin 2020

Control multiple checkboxes in Material UI

I have a dropdown menu with several checkboxes and I'm trying to add onClick event on each of them. But when I check one of the checkboxes, all of them are checked. This is what I've tried to do:

const [isChecked, setIsChecked] = React.useState(false);

const isCheckboxChecked = () => {
    setIsChecked(isChecked ? false : true)
}

return menuItems.map((item, index) => (
        <React.Fragment>
            <MenuItem
                value={item.value}
                selected={item.value === value}
                key={index}
            >
                <Checkbox
                    key={index}
                    checked={isChecked}
                    onClick={() => isCheckboxChecked()}
                >
                    <Label>{item.label}</Label>
                </Checkbox>
            </MenuItem>
            {index === 2 || index === 3 ? <hr /> : null}
        </React.Fragment>
    ));

As I understand, all checkboxes are using the same state isChecked and I'm wondering how to make them independent.




Aucun commentaire:

Enregistrer un commentaire