the Menu component doesn't accept a Fragment as a child

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?

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:10 (1 by maintainers)

Top GitHub Comments

40reactions

abohannoncommented, Jun 9, 2021

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>

13reactions

rbagrincommented, Nov 19, 2021

I know it’s a bit late, but just in case someone else has the same problem: Instead of using <React.Fragment> or <> use <div key={item.label}> Worked for me