{"record":{"id":"ca59cad90724a80c","repo":"facebook/react","slug":"can-only-set-one-of-children-or-props-dangerous","errorCode":null,"errorMessage":"Can only set one of `children` or `props.dangerouslySetInnerHTML`.","messagePattern":"Can only set one of `children` or `props\\.dangerouslySetInnerHTML`\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js","lineNumber":1930,"sourceCode":"          attributeAssign,\n          stringToChunk(escapeTextForBrowser(value)),\n          attributeEnd,\n        );\n      }\n  }\n}\n\nconst endOfStartTag = stringToPrecomputedChunk('>');\nconst endOfStartTagSelfClosing = stringToPrecomputedChunk('/>');\n\nfunction pushInnerHTML(\n  target: Array<Chunk | PrecomputedChunk>,\n  innerHTML: any,\n  children: any,\n) {\n  if (innerHTML != null) {\n    if (children != null) {\n      throw new Error(\n        'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',\n      );\n    }\n\n    if (typeof innerHTML !== 'object' || !('__html' in innerHTML)) {\n      throw new Error(\n        '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +\n          'Please visit https://react.dev/link/dangerously-set-inner-html ' +\n          'for more information.',\n      );\n    }\n\n    const html = innerHTML.__html;\n    if (html !== null && html !== undefined) {\n      if (__DEV__) {\n        checkHtmlStringCoercion(html);\n      }\n      target.push(stringToChunk('' + html));","sourceCodeStart":1912,"sourceCodeEnd":1948,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js#L1912-L1948","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Remove the children — keep dangerouslySetInnerHTML as the sole content source (or vice versa)","If spreading props, destructure children out first: const {children, ...rest} = props","Pick one content mechanism per element in shared/wrapper components and document it"],"exampleFix":"// before\n<div {...props} dangerouslySetInnerHTML={{__html: html}} />\n\n// after\nconst {children, ...rest} = props;\n<div {...rest} dangerouslySetInnerHTML={{__html: html}} />","handlingStrategy":"type-guard","validationCode":"function assertExclusiveContent(props: {children?: unknown; dangerouslySetInnerHTML?: unknown}) {\n  if (props.children != null && props.dangerouslySetInnerHTML != null) {\n    throw new TypeError('Pass either children or dangerouslySetInnerHTML, not both');\n  }\n}","typeGuard":"type InnerHTMLProps = {dangerouslySetInnerHTML: {__html: string}; children?: undefined};\ntype ChildrenProps = {children: React.ReactNode; dangerouslySetInnerHTML?: undefined};\nfunction hasOnlyOneContentSource(p: InnerHTMLProps | ChildrenProps): boolean {\n  return p.children == null || p.dangerouslySetInnerHTML == null;\n}","tryCatchPattern":null,"preventionTips":["Destructure children out before spreading props onto elements that use dangerouslySetInnerHTML","Encode the exclusivity in your prop types (children?: undefined on the innerHTML variant)","Run SSR smoke tests: this throws at render time and aborts the stream, so CI rendering catches it"],"tags":["ssr","dangerouslysetinnerhtml","children","props","hydration"],"backgroundTag":"children-and-innerhtml-conflict","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}