Skip to main content

useSelfClosingElements

Prevent extra closing tags for components without children

Examples

Invalid

<div></div>
warning[useSelfClosingElements]: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
   useSelfClosingElements.js:1:1
  
1  <div></div>
   -----------

Suggested fix: Use a SelfClosingElement instead
    | @@ -1 +1 @@
0   | - <div></div>
  0 | + <div />

<Component></Component>
warning[useSelfClosingElements]: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
   useSelfClosingElements.js:1:1
  
1  <Component></Component>
   -----------------------

Suggested fix: Use a SelfClosingElement instead
    | @@ -1 +1 @@
0   | - <Component></Component>
  0 | + <Component />

<Foo.bar></Foo.bar>
warning[useSelfClosingElements]: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
   useSelfClosingElements.js:1:1
  
1  <Foo.bar></Foo.bar>
   -------------------

Suggested fix: Use a SelfClosingElement instead
    | @@ -1 +1 @@
0   | - <Foo.bar></Foo.bar>
  0 | + <Foo.bar />

Valid

<div />
<div>child</div>
<Component />
<Component>child</Component>
<Foo.bar />
<Foo.bar>child</Foo.bar>