Question 244568 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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>
)}

  2. 0

    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

    Login or Signup to reply.
  3. 0

    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>
                  </>
                )}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search