no-danger-with-children

Prevent using children and dangerouslySetInnerHTML together. This rule is part of eslint-plugin-react-features and provides LLM-optimized error messages.

Type-unaware

Keywords: React, dangerouslySetInnerHTML, children, ESLint rule, code quality, LLM-optimized

Prevent using children and dangerouslySetInnerHTML together. This rule is part of eslint-plugin-react-features and provides LLM-optimized error messages.

Quick Summary

Aspect	Details
Severity	Error (bug prevention)
Auto-Fix	❌ No auto-fix
Category	React
ESLint MCP	✅ Optimized for ESLint MCP integration
Best For	All React/JSX projects

Rule Details

Using both children and dangerouslySetInnerHTML is ambiguous - React will throw an error.

Examples

❌ Incorrect

<div dangerouslySetInnerHTML={{ __html: html }}>
  Some text
</div>

<div dangerouslySetInnerHTML={{ __html: html }} children="text" />

✅ Correct

<div dangerouslySetInnerHTML={{ __html: html }} />

<div>Some text</div>

no-danger - Warn about dangerouslySetInnerHTML usage