I have a problem in mui multi select checkboox

47 Views Asked by At

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>

0

There are 0 best solutions below