facebook/react · error · Error

Can only set one of `children` or `props.dangerouslySetInner

Error message

Can only set one of `children` or `props.dangerouslySetInnerHTML`.

What it means

Thrown by pushInnerHTML in the Fizz HTML serializer when an element being server-rendered receives both children and dangerouslySetInnerHTML. These two props are mutually exclusive: on the client the browser would ignore the children when innerHTML is set, so React throws on the server to prevent a guaranteed hydration mismatch.

Source

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

          attributeAssign,
          stringToChunk(escapeTextForBrowser(value)),
          attributeEnd,
        );
      }
  }
}

const endOfStartTag = stringToPrecomputedChunk('>');
const endOfStartTagSelfClosing = stringToPrecomputedChunk('/>');

function pushInnerHTML(
  target: Array<Chunk | PrecomputedChunk>,
  innerHTML: any,
  children: any,
) {
  if (innerHTML != null) {
    if (children != null) {
      throw new Error(
        'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
      );
    }

    if (typeof innerHTML !== 'object' || !('__html' in innerHTML)) {
      throw new Error(
        '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
          'Please visit https://react.dev/link/dangerously-set-inner-html ' +
          'for more information.',
      );
    }

    const html = innerHTML.__html;
    if (html !== null && html !== undefined) {
      if (__DEV__) {
        checkHtmlStringCoercion(html);
      }
      target.push(stringToChunk('' + html));

View on GitHub (pinned to eafeac097b)

Solutions

1. Remove the children — keep dangerouslySetInnerHTML as the sole content source (or vice versa)
2. If spreading props, destructure children out first: const {children, ...rest} = props
3. Pick one content mechanism per element in shared/wrapper components and document it

Example fix

// before
<div {...props} dangerouslySetInnerHTML={{__html: html}} />

// after
const {children, ...rest} = props;
<div {...rest} dangerouslySetInnerHTML={{__html: html}} />

function assertExclusiveContent(props: {children?: unknown; dangerouslySetInnerHTML?: unknown}) {
  if (props.children != null && props.dangerouslySetInnerHTML != null) {
    throw new TypeError('Pass either children or dangerouslySetInnerHTML, not both');
  }
}

type InnerHTMLProps = {dangerouslySetInnerHTML: {__html: string}; children?: undefined};
type ChildrenProps = {children: React.ReactNode; dangerouslySetInnerHTML?: undefined};
function hasOnlyOneContentSource(p: InnerHTMLProps | ChildrenProps): boolean {
  return p.children == null || p.dangerouslySetInnerHTML == null;
}

When it happens

Trigger: Server-rendering (renderToPipeableStream/renderToReadableStream/renderToString) an element like <div dangerouslySetInnerHTML={{__html: html}}>text</div>, or spreading a props object that contains children onto an element that also sets dangerouslySetInnerHTML: <div {...rest} dangerouslySetInnerHTML={{__html: html}} /> where rest.children exists.

Common situations: Wrapper components that spread props onto an HTML shell while also injecting raw HTML; porting code from other frameworks where innerHTML and children coexisted; markdown/MDX renderers that pass both content sources; refactors that leave a stray children prop behind.

Related errors

• `props.dangerouslySetInnerHTML` must be in the form `{__html
• input is a self-closing tag and must neither have `children`
• link is a self-closing tag and must neither have `children`
• ${tag} is a self-closing tag and must neither have `children
• 60

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