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>

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>

• javascript
• reactjs

• the error sayed addOption[i] is undefined could you show us what contain the variable addOption ? – jeremy-denis Commented Nov 9, 2021 at 6:56
• useEffect(() => { if (props.activeTab === 1) { setLoading(true); Service.getService(searchText, userId).then((response) => { setLoading(false); setItem(response); setAddOptionNumbers( Array.from(Array(response.length).keys()).map((key) => { return "Add Option"; }) ); setAddOption( Array.from(Array(response.length).keys()).map((key) => { return [1]; }) ); }); } }, [searchText, userId, props.activeTab]); – SmeB Commented Nov 9, 2021 at 7:21
• where i is ing from, its definitely going out of bound and thats why you are getting error. so update code snippet with i value source. – bogdanoff Commented Apr 26, 2022 at 11:08

3 Answers 3

you are getting this error because you are calling the method on a undefined index the array index you are calling it on is undefined you need to make sure to call the include method on a defined string or array as a whole not a index
Try calling the includes method on the array itself and not a index it should work

As @SamRaitan has rightly pointed out, you are trying to call the method on an undefined array index.

As a timely solution, you can use conditional rendering

<MenuItem value={2}>
  <Checkbox checked={addOption[i] && addOption[i].includes(2)} />
  <ListItemText>{addOptionNames[1]}</ListItemText>
</MenuItem>

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>