facebook/react · error · Error

`props.dangerouslySetInnerHTML` must be in the form `{__html

Error message

`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://react.dev/link/dangerously-set-inner-html for more information.

What it means

Thrown by pushInnerHTML during SSR when dangerouslySetInnerHTML is not an object containing a __html key. React deliberately wraps raw HTML in {__html: ...} to make the danger explicit; a plain string, a misnamed key, or null-like objects fail the typeof/'__html' in check and abort serialization of that element.

Source

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

}

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

// TODO: Move these to RenderState so that we warn for every request.
// It would help debugging in stateful servers (e.g. service worker).

View on GitHub (pinned to eafeac097b)

Solutions

1. Wrap the string: dangerouslySetInnerHTML={{__html: value}}
2. Fix misnamed keys — the key must be exactly __html (two underscores)
3. In wrapper components, document that the prop must already be an {__html} object, or wrap it at the boundary

Example fix

// before
<div dangerouslySetInnerHTML="<b>bold</b>" />
<div dangerouslySetInnerHTML={{html: value}} />

// after
<div dangerouslySetInnerHTML={{__html: '<b>bold</b>'}} />
<div dangerouslySetInnerHTML={{__html: value}} />

function toInnerHtmlProp(value: string | {__html: string}): {__html: string} {
  return typeof value === 'string' ? {__html: value} : value;
}

function isDangerouslySetInnerHTMLProp(v: unknown): v is {__html: string} {
  return typeof v === 'object' && v !== null && '__html' in v;
}

When it happens

Trigger: Server-rendering <div dangerouslySetInnerHTML="<b>bold</b>" /> (raw string instead of the {__html} object), or <div dangerouslySetInnerHTML={{html: value}} /> (missing underscores), or a forwarded prop that was never wrapped: <Raw html={value} /> where Raw does <div dangerouslySetInnerHTML={html} />.

Common situations: Migrating from element.innerHTML assignments or other frameworks (Angular's [innerHTML], Vue's v-html) to React; typos like {html:} or {_html:}; wrapper components accepting an html prop and passing it through unwrapped.

Related errors

• Can only set one of `children` or `props.dangerouslySetInner
• input is a self-closing tag and must neither have `children`
• `dangerouslySetInnerHTML` does not make sense on <textarea>.
• link is a self-closing tag and must neither have `children`
• ${tag} is a self-closing tag and must neither have `children

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