I am trying to iterate the Mui component 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
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>