close
Rslint

    void-dom-elements-no-children

    Configuration

    rslint.config.ts
    import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/void-dom-elements-no-children': 'error',
    },
  },
]);

    Rule Details

    Prevent void DOM elements (e.g. <img />, <br />, <hr />) from receiving children. Void elements are HTML elements that cannot have any content. Passing children or dangerouslySetInnerHTML to these elements is a mistake.

    Examples of incorrect code for this rule:

    <br>Children</br>
<img alt="content">Children</img>
<img dangerouslySetInnerHTML={{ __html: 'content' }} />
React.createElement('br', {}, 'children')
React.createElement('br', null, 'children')

    Examples of correct code for this rule:

    <br />
<img alt="content" />
<div>Children</div>

    Limitations

    • Detects <pragma>.createElement(...) where <pragma> defaults to React and can be overridden via settings.react.pragma. Destructured createElement (e.g. import { createElement } from 'react') and @jsx comment pragmas are not supported.

    Original Documentation