The value of one element is object when onChange store selected in array personName. When I want to initalize object in
personName--> setPersonName({id:1,name:'ahemd'},{id:2,name:'mm'})
not working when I remove the selected element, but when click on this object again add the same object again and the checkbox doesn't change.
React Code:
<FormControl sx={{ m: 1, width: 250 }}>
<InputLabel id="demo-multiple-checkbox-label">
مستخدم فرعي
</InputLabel>
<Select
labelId="demo-multiple-checkbox-label"
id="demo-multiple-checkbox"
multiple
value={personName}
input={<OutlinedInput label="Tag" />}
renderValue={(selected) =>
selected.map((item) => item.name).join(" , ")
}
MenuProps={MenuProps}
onChange={(e)=>setpersonName(e.target.value)} when onChange store selected in arrwy personName
>
{SubuserAccounts && SubuserAccounts.length >= 0
? SubuserAccounts.map((sub, idx) => {
return (
<MenuItem key={sub} value={sub}>---> the value is object
<Checkbox
checked={
personName && personName.length >= 0
? personName.find(
(itemm) => itemm.id === sub.id
)
: ""
}
value={sub.name}
/>
<ListItemText primary={sub.name} />
</MenuItem>
);
})
: null}
</Select>
</FormControl>