Material-ui: the Menu component doesn't accept a Fragment as a child

[marcel-k]

Hi,

i'm getting this error:

_Warning: Material-UI: the Menu component doesn't accept a Fragment as a child.
Consider providing an array instead._

using this code.

        <Menu
          open={menuOpen}
          anchorEl={menuAnchorRef && menuAnchorRef.current}
          onClose={handleClose}
        >
          {menuItems.map((item, i) => (
            <React.Fragment key={item.label}>
              {i !== 0 && <Divider />}
              <MenuItem onClick={item.onClick}>{item.label}</MenuItem>
            </React.Fragment>
          ))}
        </Menu>

The menu seems to work just fine even when I use the fragment. You can put any and every html/react element as content for the menu so why not Fragment? Will this cause issues I cannot see right now? If it doesn't, why even display the warning in console?

[oliviertassinari]

I'm closing as a duplicate of #14943.

In your case, you can return an array of arrays, you don't need the fragment.

[abohannon]

For what it's worth, this is how I handled this issue when trying to dynamically render native/non-native menu items. Originally wanted to extract the menu item generation to their own components to keep the JSX clean, but that wouldn't work for non-native MenuItem.

<Select
        className={classnames(classes.select, selectClassName)}
        onChange={onChange}
        value={selectedTopic}
        autoWidth
        native={isWidthDown('xs', width) ? true : false}
        input={
          <FilledInput
            name="topic"
            id="topic-select-input"
            className={classes.filledInput}
            disableUnderline
          />
        }
        MenuProps={{
          style: {
            zIndex: 1500,
          },
        }}
      >
        {isMobile
          ? [
              <option value="" />,
              topicData.map(topic => (
                <option
                  key={`${topic.text}-LearnNav-menuItem`}
                  value={topic.path}
                >
                  {topic.text}
                </option>
              )),
            ]
          : [
              <MenuItem value="">
                <em>None</em>
              </MenuItem>,
              topicData.map(topic => (
                <MenuItem
                  key={`${topic.text}-LearnNav-menuItem`}
                  value={topic.path}
                >
                  {topic.text}
                </MenuItem>
              )),
            ]}
      </Select>

[obendesmond]

As the error says, the material menu component doesn't require a fragment as a child,
so replace with something else. may be a div or something