Skip to main content

react/noDangerWithChildren

report when a DOM element is using both children and dangerouslySetInnerHTML

ESLint Equivalent: no-danger-with-children

Examples

Invalid

<div dangerouslySetInnerHTML={{ __html: 'HTML' }}>children</div>

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    <div dangerouslySetInnerHTML={{ __html: 'HTML' }}>children</div>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


<div dangerouslySetInnerHTML={{ __html: 'HTML' }} children={'children'} />

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    <div dangerouslySetInnerHTML={{ __html: 'HTML' }} children={
    'children'} />
    ^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


<div dangerouslySetInnerHTML={{ __html: 'HTML' }} children={['children']} />

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    <div dangerouslySetInnerHTML={{ __html: 'HTML' }} children={[
    'children']} />
    ^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


<Invalid dangerouslySetInnerHTML={{ __html: 'HTML' }}>children</Invalid>

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    <Invalid dangerouslySetInnerHTML={{ __html: 'HTML' }}>children</
    Invalid>
    ^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


<Invalid dangerouslySetInnerHTML={{ __html: 'HTML' }} children={'children'}/>

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    <Invalid dangerouslySetInnerHTML={{ __html: 'HTML' }} children={
    'children'}/>
    ^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


React.createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } }, 'children')

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    React.createElement('div', { dangerouslySetInnerHTML: { __html:
    'HTML' } }, 'children')
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


React.createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } }, ['children'])

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    React.createElement('div', { dangerouslySetInnerHTML: { __html:
    'HTML' } }, ['children'])
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


React.createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' }, children: 'children' })

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    React.createElement('div', { dangerouslySetInnerHTML: { __html:
    'HTML' }, children: 'children' })
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


React.createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' }, children: ['children'] })

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    React.createElement('div', { dangerouslySetInnerHTML: { __html:
    'HTML' }, children: ['children'] })
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


React.createElement('Invalid', { dangerouslySetInnerHTML: { __html: 'HTML' }, children: 'children' })

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    React.createElement('Invalid', { dangerouslySetInnerHTML: { __html:
    'HTML' }, children: 'children' })
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


React.createElement('Invalid', { dangerouslySetInnerHTML: { __html: 'HTML' }, children: ['children'] })

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    React.createElement('Invalid', { dangerouslySetInnerHTML: { __html:
    'HTML' }, children: ['children'] })
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


React.createElement('Invalid', { dangerouslySetInnerHTML: { __html: 'HTML' } }, 'children')

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    React.createElement('Invalid', { dangerouslySetInnerHTML: { __html:
    'HTML' } }, 'children')
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


React.createElement('Invalid', { dangerouslySetInnerHTML: { __html: 'HTML' } }, ['children'])

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    React.createElement('Invalid', { dangerouslySetInnerHTML: { __html:
    'HTML' } }, ['children'])
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } }, 'children')

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } },
       'children')
    ^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } }, ['children'])

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } },
       ['children'])
    ^^^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' }, children: 'children' })

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' },
    children: 'children' })
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' }, children: ['children'] })

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' },
    children: ['children'] })
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


createElement('Invalid', { dangerouslySetInnerHTML: { __html: 'HTML' }, children: 'children' })

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    createElement('Invalid', { dangerouslySetInnerHTML: { __html: 'HTML'
      }, children: 'children' })
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


createElement('Invalid', { dangerouslySetInnerHTML: { __html: 'HTML' }, children: ['children'] })

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    createElement('Invalid', { dangerouslySetInnerHTML: { __html: 'HTML'
      }, children: ['children'] })
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


createElement('Invalid', { dangerouslySetInnerHTML: { __html: 'HTML' } }, 'children')

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    createElement('Invalid', { dangerouslySetInnerHTML: { __html: 'HTML'
      } }, 'children')
    ^^^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.


createElement('Invalid', { dangerouslySetInnerHTML: { __html: 'HTML' } }, ['children'])

 file.tsx:1 lint/react/noDangerWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing both children and the dangerouslySetInnerHTML prop.

    createElement('Invalid', { dangerouslySetInnerHTML: { __html: 'HTML'
      } }, ['children'])
    ^^^^^^^^^^^^^^^^^^^^^^^

  Setting HTML content will inadvertently override any passed children
    in React.

Valid

<div dangerouslySetInnerHTML={{ __html: 'HTML' }} />
<div>children</div>
<div children={'children'} />
<div children={['children']} />
<Valid dangerouslySetInnerHTML={{ __html: 'HTML' }} />
<Valid>children</Valid>
<Valid children={'children'} />
<Valid children={['children']} />
React.createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } })
React.createElement('div', {}, 'children')
React.createElement('div', {}, ['children'])
React.createElement('div', { children: 'children' })
React.createElement('div', { children: ['children'] })
React.createElement('valid', { dangerouslySetInnerHTML: { __html: 'HTML' } })
React.createElement('valid', {}, 'children')
React.createElement('valid', {}, ['children'])
React.createElement('valid', { children: 'children' })
React.createElement('valid', { children: ['children'] })
createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } })
createElement('div', {}, 'children')
createElement('div', {}, ['children'])
createElement('div', { children: 'children' })
createElement('div', { children: ['children'] })
createElement('valid', { dangerouslySetInnerHTML: { __html: 'HTML' } })
createElement('valid', {}, 'children')
createElement('valid', {}, ['children'])
createElement('valid', { children: 'children' })
createElement('valid', { children: ['children'] })