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