{"record":{"id":"2b71db5da5086a62","repo":"facebook/react","slug":"60","errorCode":"60","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/client/ReactDOMComponent.js","lineNumber":662,"sourceCode":"          // For use by the polyfill.\n          listenToNonDelegatedEvent('scroll', domElement);\n        }\n      }\n      return;\n    }\n    case 'dangerouslySetInnerHTML': {\n      if (value != null) {\n        if (typeof value !== 'object' || !('__html' in value)) {\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        const nextHtml: any = value.__html;\n        if (nextHtml != null) {\n          if (props.children != null) {\n            throw new Error(\n              'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',\n            );\n          }\n          const lastHtml: any =\n            prevValue != null ? (prevValue as any).__html : undefined;\n          if (lastHtml !== nextHtml) {\n            domElement.innerHTML = nextHtml;\n          }\n        }\n      }\n      break;\n    }\n    // Note: `option.selected` is not updated if `select.multiple` is\n    // disabled with `removeAttribute`. We have special logic for handling this.\n    case 'multiple': {\n      (domElement as any).multiple =\n        value && typeof value !== 'function' && typeof value !== 'symbol';\n      break;","sourceCodeStart":644,"sourceCodeEnd":680,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L644-L680","documentation":"A single host element cannot take both children and dangerouslySetInnerHTML — there would be two competing sources of inner content. In setProp's dangerouslySetInnerHTML case, if nextHtml != null and props.children != null, React throws. Note it fires even for empty-looking children like '' or [] because only null/undefined pass.","triggerScenarios":"<div dangerouslySetInnerHTML={{__html: x}}>fallback</div>; whitespace-only JSX text between tags; spreading a props object that contains children while also setting dangerouslySetInnerHTML; conditional children that evaluate to a non-null falsy string.","commonSituations":"Wrapping markdown/html injection in a component that forwards props.children by default (HOC/spread patterns); template components with both a default children slot and an html prop; refactors that leave stray text inside the tag.","solutions":["Remove the children/text from the element and keep only dangerouslySetInnerHTML","In wrapper components, deliberately pick one: render children OR the html prop, never pass both through a spread","Guard in your wrapper: choose dangerouslySetInnerHTML only when html != null, otherwise render children","Check for accidental whitespace text nodes between opening and closing tags"],"exampleFix":"// before\n<div {...props} dangerouslySetInnerHTML={{__html: html}}>fallback</div>\n\n// after\n<div {...props} {...(html != null ? {dangerouslySetInnerHTML: {__html: html}} : {})} />\n// or explicitly: html != null ? <div {...props} dangerouslySetInnerHTML={{__html: html}}/> : <div {...props}>{children}</div>","handlingStrategy":"validation","validationCode":"function renderContent({html, children, ...rest}: Props) {\n  if (html != null && children != null) {\n    // choose one instead of throwing downstream\n    return <div {...rest} dangerouslySetInnerHTML={{__html: html}} />;\n  }\n  return html != null\n    ? <div {...rest} dangerouslySetInnerHTML={{__html: html}} />\n    : <div {...rest}>{children}</div>;\n}","typeGuard":"const hasBothContentSources = (p: {html?: unknown; children?: unknown}) =>\n  p.html != null && p.children != null;","tryCatchPattern":null,"preventionTips":["Wrapper components must pick children OR html explicitly, never spread both","Destructure children out of any {...rest} spread onto an element that may get dangerouslySetInnerHTML","Watch for whitespace-only JSX text between tags when using html injection"],"tags":["react-dom","dangerouslysetinnerhtml","children","props-validation"],"backgroundTag":"children-with-dangerouslysetinnerhtml","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}