MUI: The Menu component doesn't accept a Fragment as a child

Question

Created a Menu component with 3 menu items that are conditionally rendered It keeps on showing 'MUI: The Menu component doesn't accept a Fragment as a child. Consider providing an array instead. '. on the console.

I checked some questions here,But i don't quite understand it.

Help highly appreciated

 <Menu
            id="basic-menu"
            anchorEl={anchorEl}
            open={postSettings}
            onClose={() => {
              setPostSettings(false);
            }}
            MenuListProps={{
              "aria-labelledby": "basic-button",
            }}
          >
            {post?.owner?._id === user._id ? (
              <>
                <MenuItem>Edit</MenuItem>
                <MenuItem onClick={handleDeletePostClick}>Delete</MenuItem>
                <ConfirmDelete
                  open={showDeletePostConfirm}
                  handleClose={handleDeletePostCancel}
                  handleConfirm={handleDeletePostConfirm}
                  description="Are you sure you want to delete  ? 
                />
              </>
            ) : (
              <MenuItem>Report</MenuItem>
            )}
          </Menu>

I have attached the link which shows the error image

The link has error image

Answer 1

Fixed it by wrapping it inside a Box(div) and providing a key. This link helps:

https://github.com/mui/material-ui/issues/16181

{post?.owner?._id === user._id ? (
  <Box key={post._id}>
    <MenuItem>Edit</MenuItem>
    <MenuItem onClick={handleDeletePostClick}>Delete</MenuItem>
    <ConfirmDelete
      open={showDeletePostConfirm}
      handleClose={handleDeletePostCancel}
      handleConfirm={handleDeletePostConfirm}
      description="Are you sure you want to delete ? "
    />
  </Box>
) : (
  <Box key={post._id}>
    <MenuItem>Report</MenuItem>
  </Box>
)}

Answer 2

What they expect is actually a array of elements

[<MenuItem>Edit</MenuItem>
 <MenuItem onClick={handleDeletePostClick}>Delete</MenuItem>
  <ConfirmDelete
  open={showDeletePostConfirm}
  handleClose={handleDeletePostCancel}
  handleConfirm={handleDeletePostConfirm}
  description="Are you sure you want to delete"
  />]

This should work

here is the refference

Answer 3

You'll have to wrap the conditional items in individual Fragments

    {post?.owner?._id === user._id ? (
                  <>
                    <MenuItem>Edit</MenuItem>
                    <MenuItem onClick={handleDeletePostClick}>Delete</MenuItem>
                    <ConfirmDelete
                      open={showDeletePostConfirm}
                      handleClose={handleDeletePostCancel}
                      handleConfirm={handleDeletePostConfirm}
                      description="Are you sure you want to delete  ?"
                    />
                  </>
                  ) : (
                  <>
                  <MenuItem>Report</MenuItem>
                  </>
                )}