---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: withChildren.jsx
---
# Input
```jsx
<>
    <>foo</>
    <React.Fragment>foo</React.Fragment>
    <Fragment>foo</Fragment>
    {/*  valid   */}
    <React.StrictMode><App /></React.StrictMode>
</>

```

# Diagnostics
```
withChildren.jsx:2:5 lint/complexity/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using unnecessary Fragment.
  
    1 │ <>
  > 2 │     <>foo</>
      │     ^^^^^^^^
    3 │     <React.Fragment>foo</React.Fragment>
    4 │     <Fragment>foo</Fragment>
  
  i A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
  
  i Unsafe fix: Remove the Fragment
  
    2 │ ····<>foo</>
      │     --   ---

```

```
withChildren.jsx:3:5 lint/complexity/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using unnecessary Fragment.
  
    1 │ <>
    2 │     <>foo</>
  > 3 │     <React.Fragment>foo</React.Fragment>
      │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 │     <Fragment>foo</Fragment>
    5 │     {/*  valid   */}
  
  i A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
  
  i Unsafe fix: Remove the Fragment
  
    3 │ ····<React.Fragment>foo</React.Fragment>
      │     ----------------   -----------------

```

```
withChildren.jsx:4:5 lint/complexity/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using unnecessary Fragment.
  
    2 │     <>foo</>
    3 │     <React.Fragment>foo</React.Fragment>
  > 4 │     <Fragment>foo</Fragment>
      │     ^^^^^^^^^^^^^^^^^^^^^^^^
    5 │     {/*  valid   */}
    6 │     <React.StrictMode><App /></React.StrictMode>
  
  i A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
  
  i Unsafe fix: Remove the Fragment
  
    4 │ ····<Fragment>foo</Fragment>
      │     ----------   -----------

```