How to modify react/jsx-no-useless-fragment rule to allow <>{children}

Question

I am all for getting rid of useless React Fragments <><Element /></> from my codebase and the ESLint rule react/jsx-no-useless-fragment is great for catching this.

However, there are repetitive cases where the Fragment is not useless, specifically for return <>{children}</>, this scenario is my desired output in a few cases throughout my codebase.

Is there a way to configure the react/jsx-no-useless-fragment rule to keep working in general and have it not raise warnings in scenarios where the case is <>{children}</>?

Note: I'm not looking to call // eslint-disable-next-line react/jsx-no-useless-fragment above every scenario (that is already my current workaround).

You have the [`allowExpressions`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-useless-fragment.md#allowexpressions) option for that — Fraction, May 30 '23 at 11:20
@Fraction thank you that worked perfectly for me, if you write an answer I'll mark it as accepted. — Barry Michael Doyle, May 30 '23 at 21:05

score 2 · Accepted Answer · answered May 31 '23 at 08:14

2

You can use the allowExpressions option which allow expressions in a fragment

// Good
<>{children}</>

answered May 31 '23 at 08:14

Fraction

11,668
5
28
48

How to modify react/jsx-no-useless-fragment rule to allow <>{children}

1 Answers1