Changes are made in all selections, instead of the one I choose. When I check the checkbox in one selection, all the others change. Changing How can I change that? applications should change the name to the name of the marked checkbox in each selected selection. However, it changes in all the selections I have.
const handleSelect = (e,id) => {
let newValue = [1];
if (e.target.value.length) {
newValue = e.target.value.filter((item) => {
return item > 1;
});
}
const finalString = newValue
.reduce((acumulatedFinal, pass) => {
return acumulatedFinal + ", " + exportOptionNames[pass - 1];
}, "")
.replace(",", "")
.trim();
setSelectedSelections(finalString.length ? finalString : "Export Option");
setExportOption(newValue);
};
<FormControl }>
<Select onClick={(e)=> e.stopPropagation()}
labelId="label"
id="select"
value={exportOption}
multiple
onChange={(e) => handleSelect (e, item.id)}
key={item.id}
renderValue={() => {
return selectedOptionNames;
}}
input={<BootstrapInput />}
>
<MenuItem value={1} disabled>
Export Report
</MenuItem>
<MenuItem value={2}>
<Checkbox checked={exportOption.includes(2)} />
<ListItemText>{exportOptionNames[1]}</ListItemText>
</MenuItem>
<MenuItem value={3}>
<Checkbox checked={exportOption.includes(3)} />
<ListItemText>{exportOptionNames[2]}</ListItemText>
</MenuItem>
<MenuItem value={4}>
<Checkbox checked={exportOption.includes(4)} />
<ListItemText>{exportOptionNames[3]}</ListItemText>
</MenuItem>
</Select>