[Fix] jsx-no-useless-fragment: accept fragments with call expressions

[hasparus]

👋

Solves part of #2584.

[ljharb]

this seems like a useless fragment to me tho? since foos.map produces an array, and an array is a valid render value.

[hasparus]

In case if foos is an array, the fragment wraps an array (a React node) into a React element. It's not useless if it's intentional (e.g. a function where you pass this treats arrays different than single elements -- requires a single child or sth like that).

#2584 (comment)

But actually, we can't assume what map does, and even if map suggests an array, we treat all call expressions the same. It may return undefined and then we have a crash at runtime if render it without wrapping in the fragment.

const foos = { map: () => undefined };

[ljharb]

What crash at runtime? A component that returns [undefined] is a valid component.

You're right that it wouldn't be useless if it's being passed somewhere, but since the introduction of fragments it seems like anything that accepts a fragment should also accept an array?

[hasparus]

What crash at runtime? A component that returns [undefined] is a valid component.

Yes, but it's not valid if it returns undefined. There is no array here.

This doesn't have to be map, but even when the function is called "map" we have no guarantee that this is Array.prototype.map. A function may return undefined.

[Vishwas-75]

How to disable this jsx-no-useless-frragments

[ljharb]

@Vishwas-75 same way to disable any rule; set it to "off" in your eslint config, or with an inline eslint override comment. eslint's docs are a good resource.