CODEWITHSUNDEEP
reactjseslintreact-fragment
Barry Michael Doyle
Barry Michael Doyle

Reputation: 10588

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

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).

Upvotes: 4

Views: 2698

Answers (2)

Gennady Magomaev
Gennady Magomaev

Reputation: 1285

return <>{React.Children.map(children, child => child)}</>;

Upvotes: -1

Fraction
Fraction

Reputation: 12954

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

// Good
<>{children}</>

Upvotes: 3

Related Questions