Lint Rules

noDangerouslySetInnerHtmlWithChildren (since v0.10.0)

This rule is recommended by Rome.

Report when a DOM element or a component uses both children and dangerouslySetInnerHTML prop.

Examples

Invalid

function createMarkup() {
    return { __html: 'child' }
}
<Component dangerouslySetInnerHTML={createMarkup()}>"child1"</Component>
security/noDangerouslySetInnerHtmlWithChildren.js:4:12 lint/security/noDangerouslySetInnerHtmlWithChildren ━━━━━━━━━━

   Avoid passing both children and the dangerouslySetInnerHTML prop.
  
    2 │     return { __html: 'child' }
    3 │ }
  > 4 │ <Component dangerouslySetInnerHTML={createMarkup()}>"child1"</Component>
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    5 │ 
  
   This is the source of the children prop
  
    2 │     return { __html: 'child' }
    3 │ }
  > 4 │ <Component dangerouslySetInnerHTML={createMarkup()}>"child1"</Component>
                                                       ^^^^^^^^
    5 │ 
  
   Setting HTML content will inadvertently override any passed children in React
  
function createMarkup() {
    return { __html: 'child' }
}
<Component dangerouslySetInnerHTML={createMarkup()} children="child1" />
security/noDangerouslySetInnerHtmlWithChildren.js:4:12 lint/security/noDangerouslySetInnerHtmlWithChildren ━━━━━━━━━━

   Avoid passing both children and the dangerouslySetInnerHTML prop.
  
    2 │     return { __html: 'child' }
    3 │ }
  > 4 │ <Component dangerouslySetInnerHTML={createMarkup()} children="child1" />
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    5 │ 
  
   This is the source of the children prop
  
    2 │     return { __html: 'child' }
    3 │ }
  > 4 │ <Component dangerouslySetInnerHTML={createMarkup()} children="child1" />
                                                       ^^^^^^^^^^^^^^^^^
    5 │ 
  
   Setting HTML content will inadvertently override any passed children in React
  
React.createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } }, 'children')
security/noDangerouslySetInnerHtmlWithChildren.js:1:30 lint/security/noDangerouslySetInnerHtmlWithChildren ━━━━━━━━━━

   Avoid passing both children and the dangerouslySetInnerHTML prop.
  
  > 1 │ React.createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } }, 'children')
                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
   This is the source of the children prop
  
  > 1 │ React.createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } }, 'children')
                                                                               ^^^^^^^^^^
    2 │ 
  
   Setting HTML content will inadvertently override any passed children in React