facebook/react · error · Error

menuitems cannot have `children` nor `dangerouslySetInnerHTM

Error message

menuitems cannot have `children` nor `dangerouslySetInnerHTML`.

What it means

Thrown by pushStartMenuItem when a <menuitem> element has a non-null children or dangerouslySetInnerHTML prop. <menuitem> was a Firefox-only, since-removed autocomplete attribute holder that React treats as a leaf: it emits only a start tag with attributes and no content, so children/innerHTML props are rejected during SSR.

Source

Thrown at packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js:3580

}

function pushStartMenuItem(
  target: Array<Chunk | PrecomputedChunk>,
  props: Object,
  formatContext: FormatContext,
): ReactNodeList {
  target.push(startChunkForTag('menuitem'));

  for (const propKey in props) {
    if (hasOwnProperty.call(props, propKey)) {
      const propValue = props[propKey];
      if (propValue == null) {
        continue;
      }
      switch (propKey) {
        case 'children':
        case 'dangerouslySetInnerHTML':
          throw new Error(
            'menuitems cannot have `children` nor `dangerouslySetInnerHTML`.',
          );
        default:
          pushAttribute(target, propKey, propValue);
          break;
      }
    }
  }

  pushViewTransitionAttributes(target, formatContext);

  target.push(endOfStartTag);
  return null;
}

function pushTitle(
  target: Array<Chunk | PrecomputedChunk>,
  props: Object,

View on GitHub (pinned to eafeac097b)

Solutions

Replace <menuitem> with a real element such as <li>, <button>, or <div role="menuitem"> that can hold children
If you must keep the tag, render its label as an attribute (e.g. label={text}) rather than children

Example fix

// before
<menuitem label={label}>{label}</menuitem>

// after
<div role="menuitem">{label}</div>

Defensive patterns

Strategy: type-guard

Validate before calling

// treat menuitem like other leaf tags before rendering
const {children, dangerouslySetInnerHTML, ...rest} = props;
return <menuitem {...rest} />;

Type guard

type MenuItemProps = {children?: never; dangerouslySetInnerHTML?: never; [k: string]: unknown};

Prevention

Avoid the deprecated <menuitem> tag entirely; use role="menuitem" on real elements
Keep attribute-only content on tags that emit no end tag

When it happens

Trigger: Server-rendering <menuitem>{label}</menuitem> or <menuitem {...props} /> where props contains children/dangerouslySetInnerHTML.

Common situations: Old toolbar/context-menu markup from Firefox-era examples (the tag is deprecated and unsupported in all modern browsers); legacy HTML pasted into JSX.

Related errors

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/359d0a39eb6ab573. Report an issue: GitHub.