{"record":{"id":"bd630e9b83efdb34","repo":"honojs/hono","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":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/jsx/base.ts","lineNumber":252,"sourceCode":"        })\n        buffer[0] += ' style=\"'\n        escapeToBuffer(styleStr, buffer)\n        buffer[0] += '\"'\n      } else if (typeof v === 'string') {\n        buffer[0] += ` ${key}=\"`\n        escapeToBuffer(v, buffer)\n        buffer[0] += '\"'\n      } else if (v === null || v === undefined) {\n        // Do nothing\n      } else if (typeof v === 'number' || (v as HtmlEscaped).isEscaped) {\n        buffer[0] += ` ${key}=\"${v}\"`\n      } else if (typeof v === 'boolean' && booleanAttributes.includes(key)) {\n        if (v) {\n          buffer[0] += ` ${key}=\"\"`\n        }\n      } else if (key === 'dangerouslySetInnerHTML') {\n        if (children.length > 0) {\n          throw new Error('Can only set one of `children` or `props.dangerouslySetInnerHTML`.')\n        }\n\n        children = [raw(v.__html)]\n      } else if (v instanceof Promise) {\n        buffer[0] += ` ${key}=\"`\n        buffer.unshift('\"', v)\n      } else if (typeof v === 'function') {\n        if (!key.startsWith('on') && key !== 'ref') {\n          throw new Error(`Invalid prop '${key}' of type 'function' supplied to '${tag}'.`)\n        }\n        // maybe event handler for client components, just ignore in server components\n      } else {\n        buffer[0] += ` ${key}=\"`\n        escapeToBuffer(v.toString(), buffer)\n        buffer[0] += '\"'\n      }\n    }\n","sourceCodeStart":234,"sourceCodeEnd":270,"githubUrl":"https://github.com/honojs/hono/blob/e2740d5a1bd0b4254e517e3af8b60789284bc7bd/src/jsx/base.ts#L234-L270","documentation":"In hono/jsx server rendering, setting dangerouslySetInnerHTML replaces the element's children with raw HTML. To avoid ambiguous output, Hono throws if the same element also has children when serializing to a string buffer.","triggerScenarios":"JSX like `<div dangerouslySetInnerHTML={{ __html: rawHtml }}>{'text'}</div>` or `<div dangerouslySetInnerHTML={{__html}}><span>x</span></div>` — any element where both children and dangerouslySetInnerHTML are present at render time.","commonSituations":"Copy-pasting React DOM patterns that silently prefer dangerouslySetInnerHTML; adding fallback children for empty HTML then forgetting to remove them; conditionally injecting HTML via dangerouslySetInnerHTML in a component that always renders children.","solutions":["Remove the children from the element that uses dangerouslySetInnerHTML","If you need conditional behavior, choose one branch: render children XOR set dangerouslySetInnerHTML, never both","Wrap the injected HTML in a dedicated element with no children"],"exampleFix":"// before\n<div dangerouslySetInnerHTML={{ __html: html }}>\n  <p>Fallback</p>\n</div>\n// after\n<div dangerouslySetInnerHTML={{ __html: html }}></div>","handlingStrategy":"validation","validationCode":"function SafeHtml({ html, children }: { html?: string; children?: Child[] }) {\n  if (html && children && children.length > 0) {\n    throw new TypeError('Pass either html or children, not both')\n  }\n  return <div {...(html ? { dangerouslySetInnerHTML: { __html: html } } : {})}>{children}</div>\n}","typeGuard":"const hasBoth = (p: { children?: unknown[]; dangerouslySetInnerHTML?: unknown }) =>\n  Boolean(p.dangerouslySetInnerHTML && p.children && p.children.length > 0)","tryCatchPattern":"null","preventionTips":["Treat dangerouslySetInnerHTML as mutually exclusive with children by convention","Codemod/lint against JSX elements that have both an inner element and dangerouslySetInnerHTML","Encapsulate raw HTML injection in a dedicated <Raw html={...}/> component"],"tags":["hono","jsx","ssr","dangerouslysetinnerhtml"],"backgroundTag":"dangerouslysetinnerhtml-with-children","analyzedSha":"e2740d5a1bd0b4254e517e3af8b60789284bc7bd","analyzedAt":"2026-08-28T10:18:08.750Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}