I am trying to iterate the Mui ponent MenuItem by using forEach loop but I am getting Type 'void' is not assignable to type 'ReactNode' error. Here is my code snippet-

      <TableCell>
        <Typography>expiry</Typography>
        <Select variant="outlined" sx={{ width: '100%', height: 35, borderRadius: 2 }}>
        { groupData.forEach((option) => (
          <MenuItem key={option.expiry} value={option.expiry}>
            {option.expiry}
          </MenuItem>
          ))}
        </Select>
      </TableCell>

Thanks in Advance

I am trying to iterate the Mui ponent MenuItem by using forEach loop but I am getting Type 'void' is not assignable to type 'ReactNode' error. Here is my code snippet-

      <TableCell>
        <Typography>expiry</Typography>
        <Select variant="outlined" sx={{ width: '100%', height: 35, borderRadius: 2 }}>
        { groupData.forEach((option) => (
          <MenuItem key={option.expiry} value={option.expiry}>
            {option.expiry}
          </MenuItem>
          ))}
        </Select>
      </TableCell>

Thanks in Advance

• javascript
• reactjs
• material-ui

• Did you mean to use .map instead of .forEach? – Nicholas Tower Commented Jan 26, 2022 at 1:15
• no @NicholasTower I mean forEach only' – Akshay Kumar Commented Jan 26, 2022 at 5:12
• .forEach doesn't return anything. If you want to create an array of <MenuItem>s, you need to use .map. – Nicholas Tower Commented Jan 26, 2022 at 13:17

1 Answer 1

forEach returns void. To display a list of items in JSX, you use the map method of the array, which will convert the items of the array into some other form. For example:

const squares = (
  <ul>
    {[1, 2, 3, 4].map((value) => (
      <li key={value}>{value}</li>
    ))}
  </ul>
);

Learn more about lists in react here

For your case, you can do the following:

<TableCell>
  <Typography>expiry</Typography>
  <Select variant="outlined" sx={{ width: '100%', height: 35, borderRadius: 2 }}>
  {groupData.map((option) => (
    <MenuItem key={option.expiry} value={option.expiry}>
      {option.expiry}
    </MenuItem>
  ))}
  </Select>
</TableCell>