react-doctor/no-danger-with-children

Use either children or dangerouslySetInnerHTML on an element, never both.

• Category: Correctness
• Severity: error
• Source: oxlint-plugin-react-doctor
• Framework: global
• Enabled when: always
• Documentation: https://oxc.rs/docs/guide/usage/linter/rules/react/no-danger-with-children

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires when one element or createElement call has BOTH dangerouslySetInnerHTML and children — children being nested JSX content, a children prop, or positional createElement args — since React throws a runtime warning and the innerHTML wins, silently dropping the children. The check resolves spread props and createElement prop objects (including a variable's static initializer) to see merged dangerouslySetInnerHTML/children. Whitespace-only JSXText containing a newline is treated as auto-format indentation and does NOT count as a child, but a space-only child with no newline (<Hello> </Hello>) DOES fire. Limitation (under-reports): a spread or props object whose source cannot be statically resolved — e.g. a variable lacking an initializer, a self-referential or already-visited symbol, or any non-object expression — is treated as empty, so a real conflict hidden behind that spread is silently missed rather than reported.

Fix prompt

Use this once validation confirms the diagnostic is real.

Pick one rendering path. If the markup is the real content, drop dangerouslySetInnerHTML and render the children normally: <div>{content}</div>. If you genuinely need raw HTML, remove the children/children prop so only the danger prop remains: <div dangerouslySetInnerHTML={{ __html: sanitized }} />. For createElement, pass the conflicting value either as the children argument or inside props — never both. See https://oxc.rs/docs/guide/usage/linter/rules/react/no-danger-with-children