Enable allowExpressions for the react/jsx-no-useless-fragment rule

[codybrouwers]

The react/jsx-no-useless-fragment has a allowExpressions configuration option that allows fragments that have a single expression in them like:

const arrayOfElements = array.map((item) => {
  return <span key={item}>{item}</span>
})
<>
  {arrayOfElements}
</>

This is useful for TypeScript when in an component you want to return a single array of elements but if you return just the arrayOfElements then the return type of the component becomes JSX.Element[] which when you use the component produces an error:

'Component' cannot be used as a JSX component.
  Its return type 'Element[]' is not a valid JSX element.
    Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2786)

So wrapping the array with the fragment fixes the type error but causes the ESLint error, so enabling the allowExpressions option allows for this specific use case.

[vercel-release-bot]

🎉 This issue has been resolved in version 4.0.0-canary.1 🎉

The release is available on:

• npm package (@canary dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[vercel-release-bot]

🎉 This issue has been resolved in version 4.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀