---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: invalid.tsx
---
# Input
```tsx
<div               ></div>;
<Component></Component>;
<Foo.bar></Foo.bar>;
<div

></div>;

<div ></div> /* comment */;
/* comment */ <div ></div>;
<Generic<true>></Generic>;
```

# Diagnostics
```
invalid.tsx:1:1 lint/style/useSelfClosingElements  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
  
  > 1 │ <div               ></div>;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ <Component></Component>;
    3 │ <Foo.bar></Foo.bar>;
  
  i Unsafe fix: Use a SelfClosingElement instead
  
    1 │ <div···············></div>;
      │                    -- ---  

```

```
invalid.tsx:2:1 lint/style/useSelfClosingElements  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
  
    1 │ <div               ></div>;
  > 2 │ <Component></Component>;
      │ ^^^^^^^^^^^^^^^^^^^^^^^
    3 │ <Foo.bar></Foo.bar>;
    4 │ <div
  
  i Unsafe fix: Use a SelfClosingElement instead
  
     1  1 │   <div               ></div>;
     2    │ - <Component></Component>;
        2 │ + <Component·/>;
     3  3 │   <Foo.bar></Foo.bar>;
     4  4 │   <div
  

```

```
invalid.tsx:3:1 lint/style/useSelfClosingElements  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
  
    1 │ <div               ></div>;
    2 │ <Component></Component>;
  > 3 │ <Foo.bar></Foo.bar>;
      │ ^^^^^^^^^^^^^^^^^^^
    4 │ <div
    5 │ 
  
  i Unsafe fix: Use a SelfClosingElement instead
  
     1  1 │   <div               ></div>;
     2  2 │   <Component></Component>;
     3    │ - <Foo.bar></Foo.bar>;
        3 │ + <Foo.bar·/>;
     4  4 │   <div
     5  5 │   
  

```

```
invalid.tsx:4:1 lint/style/useSelfClosingElements  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
  
    2 │ <Component></Component>;
    3 │ <Foo.bar></Foo.bar>;
  > 4 │ <div
      │ ^^^^
  > 5 │ 
  > 6 │ ></div>;
      │ ^^^^^^^
    7 │ 
    8 │ <div ></div> /* comment */;
  
  i Unsafe fix: Use a SelfClosingElement instead
  
    6 │ ></div>;
      │ -- ---  

```

```
invalid.tsx:8:1 lint/style/useSelfClosingElements  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
  
     6 │ ></div>;
     7 │ 
   > 8 │ <div ></div> /* comment */;
       │ ^^^^^^^^^^^^
     9 │ /* comment */ <div ></div>;
    10 │ <Generic<true>></Generic>;
  
  i Unsafe fix: Use a SelfClosingElement instead
  
    8 │ <div·></div>·/*·comment·*/;
      │      -- ---                

```

```
invalid.tsx:9:15 lint/style/useSelfClosingElements  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
  
     8 │ <div ></div> /* comment */;
   > 9 │ /* comment */ <div ></div>;
       │               ^^^^^^^^^^^^
    10 │ <Generic<true>></Generic>;
  
  i Unsafe fix: Use a SelfClosingElement instead
  
    9 │ /*·comment·*/·<div·></div>;
      │                    -- ---  

```

```
invalid.tsx:10:1 lint/style/useSelfClosingElements  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
  
     8 │ <div ></div> /* comment */;
     9 │ /* comment */ <div ></div>;
  > 10 │ <Generic<true>></Generic>;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^
  
  i Unsafe fix: Use a SelfClosingElement instead
  
     8  8 │   <div ></div> /* comment */;
     9  9 │   /* comment */ <div ></div>;
    10    │ - <Generic<true>></Generic>;
       10 │ + <Generic<true>·/>;
  

```