noUselessFragments
Diagnostic Category: lint/complexity/noUselessFragments
Since: v1.0.0
Sources:
- Same as:
react/jsx-no-useless-fragment
Disallow unnecessary fragments
Examples
Section titled ExamplesInvalid
Section titled Invalid<>foo</>code-block.jsx:1:1 lint/complexity/noUselessFragments FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid using unnecessary Fragment.
> 1 │ <>
│ ^^
> 2 │ foo
> 3 │ </>
│ ^^^
4 │
ℹ 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.
ℹ Unsafe fix: Remove the Fragment
1 │ - <>
2 │ - foo
3 │ - </>
1 │ + “foo”
4 2 │
<React.Fragment>foo</React.Fragment>code-block.jsx:1:1 lint/complexity/noUselessFragments FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid using unnecessary Fragment.
> 1 │ <React.Fragment>
│ ^^^^^^^^^^^^^^^^
> 2 │ foo
> 3 │ </React.Fragment>
│ ^^^^^^^^^^^^^^^^^
4 │
ℹ 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.
ℹ Unsafe fix: Remove the Fragment
1 │ - <React.Fragment>
2 │ - foo
3 │ - </React.Fragment>
1 │ + “foo”
4 2 │
<> <>foo</> <SomeComponent /></>code-block.jsx:2:5 lint/complexity/noUselessFragments FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid using unnecessary Fragment.
1 │ <>
> 2 │ <>foo</>
│ ^^^^^^^^
3 │ <SomeComponent />
4 │ </>
ℹ 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.
ℹ Unsafe fix: Remove the Fragment
2 │ ····<>foo</>
│ -- ---
<></>code-block.jsx:1:1 lint/complexity/noUselessFragments ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid using unnecessary Fragment.
> 1 │ <></>
│ ^^^^^
2 │
ℹ 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.
Valid
Section titled Valid<> <Foo /> <Bar /></><>foo {bar}</>