---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: invalid.jsx
---
# Input
```jsx
import React, {Fragment} from "react";

<div>
    {/* invalid */}
    <Fragment>
        <p>Lorem</p>
        <strong>Ipsum</strong>
    </Fragment>

    <React.Fragment>
        <acronym>Lorem</acronym>
        <aside>Ipsum</aside>
    </React.Fragment>

    </*comment*/Fragment>
        <p>Lorem</p>
        <strong>Ipsum</strong>
    </ /*comment*/Fragment>
</div>
```

# Diagnostics
```
invalid.jsx:5:5 lint/style/useFragmentSyntax  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Use shorthand syntax for Fragment elements instead of standard syntax.
  
     3 │ <div>
     4 │     {/* invalid */}
   > 5 │     <Fragment>
       │     ^^^^^^^^^^
   > 6 │         <p>Lorem</p>
   > 7 │         <strong>Ipsum</strong>
   > 8 │     </Fragment>
       │     ^^^^^^^^^^^
     9 │ 
    10 │     <React.Fragment>
  
  i Shorthand fragment syntax saves keystrokes and is only inapplicable when keys are required.
  
  i Unsafe fix: Replace <Fragment> with the fragment syntax
  
     3  3 │   <div>
     4  4 │       {/* invalid */}
     5    │ - ····<Fragment>
        5 │ + ····<>
     6  6 │           <p>Lorem</p>
     7  7 │           <strong>Ipsum</strong>
     8    │ - ····</Fragment>
        8 │ + ····</>
     9  9 │   
    10 10 │       <React.Fragment>
  

```

```
invalid.jsx:10:5 lint/style/useFragmentSyntax  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Use shorthand syntax for Fragment elements instead of standard syntax.
  
     8 │     </Fragment>
     9 │ 
  > 10 │     <React.Fragment>
       │     ^^^^^^^^^^^^^^^^
  > 11 │         <acronym>Lorem</acronym>
  > 12 │         <aside>Ipsum</aside>
  > 13 │     </React.Fragment>
       │     ^^^^^^^^^^^^^^^^^
    14 │ 
    15 │     </*comment*/Fragment>
  
  i Shorthand fragment syntax saves keystrokes and is only inapplicable when keys are required.
  
  i Unsafe fix: Replace <Fragment> with the fragment syntax
  
     8  8 │       </Fragment>
     9  9 │   
    10    │ - ····<React.Fragment>
       10 │ + ····<>
    11 11 │           <acronym>Lorem</acronym>
    12 12 │           <aside>Ipsum</aside>
    13    │ - ····</React.Fragment>
       13 │ + ····</>
    14 14 │   
    15 15 │       </*comment*/Fragment>
  

```

```
invalid.jsx:15:5 lint/style/useFragmentSyntax  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Use shorthand syntax for Fragment elements instead of standard syntax.
  
    13 │     </React.Fragment>
    14 │ 
  > 15 │     </*comment*/Fragment>
       │     ^^^^^^^^^^^^^^^^^^^^^
  > 16 │         <p>Lorem</p>
  > 17 │         <strong>Ipsum</strong>
  > 18 │     </ /*comment*/Fragment>
       │     ^^^^^^^^^^^^^^^^^^^^^^^
    19 │ </div>
  
  i Shorthand fragment syntax saves keystrokes and is only inapplicable when keys are required.
  
  i Unsafe fix: Replace <Fragment> with the fragment syntax
  
    13 13 │       </React.Fragment>
    14 14 │   
    15    │ - ····</*comment*/Fragment>
       15 │ + ····</*comment*/>
    16 16 │           <p>Lorem</p>
    17 17 │           <strong>Ipsum</strong>
    18    │ - ····</·/*comment*/Fragment>
       18 │ + ····</·/*comment*/>
    19 19 │   </div>
  

```