Search code examples
reactjseslintreact-fragment

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

Solution

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

    // Good
<>{children}</>