TypeError: Cannot read properties of undefined (reading 'includes'). I got this mistake, but I can't get through and solve the problem. Error shows this line
{addOption && addOption.length && (
<Select
onClick={(e) => e.stopPropagation()}
labelId="demo-customized-select-label"
id="demo-customized-select"
// value={addOption[i]}
value={addOption[i]}
multiple
onChange={(ev) => handleadd(ev, i)}
renderValue={() => {
return selectedOptionNames[i];
}}
input={<BootstrapInput />}
>
<MenuItem value={1} disabled>
FILE
</MenuItem>
<MenuItem value={2}>
<Checkbox checked={addOption[i].includes(2)} />
<ListItemText>{addOptionNames[1]}</ListItemText>
</MenuItem>
<MenuItem value={3}>
<Checkbox checked={addOption[i].includes(3)} />
<ListItemText>{addOptionNames[2]}</ListItemText>
</MenuItem>
<MenuItem value={4}>
<Checkbox checked={addOption[i].includes(4)} />
<ListItemText>{addOptionNames[3]}</ListItemText>
</MenuItem>
</Select>
As per your code snippet addOption is an array. So, you should have to perform the includes method on the array itself, not on a single array element. Check this out in your Menu Items :
<MenuItem value={X}>
<Checkbox checked = { addOption.includes(X) } />
<ListItemText> { addOptionNames[X-1] } </ListItemText>
</MenuItem>