react/jsx-no-useless-fragment Pedantic ​
What it does ​
Disallow unnecessary fragments.
Why is this bad? ​
Fragments are a useful tool when you need to group multiple children without adding a node to the DOM tree. However, sometimes you might end up with a fragment with a single child. When this child is an element, string, or expression, it's not necessary to use a fragment.
Example ​
Examples of incorrect code for this rule:
jsx
<>foo</>
<div><>foo</></div>Examples of correct code for this rule:
jsx
<>foo <div></div></>
<div>foo</div>