How to resolve Type 'void' is not assignable to type 'ReactNode' issue in TSX

Question

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 doesn't return anything. If you want to create an array of <MenuItem>s, you need to use .map. — Nicholas Tower
– Nicholas Tower, Commented Jan 26, 2022 at 13:17

vighnesh153 · Accepted Answer · 2022-01-26 06:05:39Z

6

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>

answered Jan 26, 2022 at 6:05

vighnesh153

5,5103 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Akshay Kumar Over a year ago

Yes, I did this but I am unable to get any data in {option.expiry} seems like the statement is not executing.

vighnesh153 Over a year ago

Try adding console.log(groupData) and see if it is following the interface contract you are expecting i.e, it should be an array with each element being an object which has expiry field.

Collectives™ on Stack Overflow

How to resolve Type 'void' is not assignable to type 'ReactNode' issue in TSX

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related