React components with multiple root elements are not supported

[xMihai]

• I tried using the @types/react package and had problems.
• I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• Mention the authors (see Definitions by: in index.d.ts) so they can respond.
  • Authors: @johnnyreilly @bbenezech @pzavolinsky @digiguru @ericanderson @morcerf @tkrotoff @DovydasNavickas @onigoetz @richseviora

React 16 components can have multiple root elements.

const Items = ({ items }: MyProps) => items.map(item => <div key={item.id}>{item.name}</div>)

However, TypeScript will break with:
error TS2605: JSX element type 'Element[]' is not a constructor function for JSX elements. Property 'render' is missing in type 'Element[]'.

[tkrotoff]

See PR #19363

[danedavid]

That PR has been merged, so now does this work ?
Does not work for stateless functional components: https://stackoverflow.com/questions/46709773/typescript-react-rendering-an-array-from-a-stateless-functional-component

[xMihai]

It throws the same error with @types/react@16.0.10

Returning array of elements works in React 16, even from stateless functional components. The SO answer is incorrect.

I can suppress the Typescript error and have my code working if I cast my component as any:
const Items: any = ({ items }: MyProps) => items.map(item => <div key={item.id}>{item.name}</div>)

[edorivai]

Just leaving my reproduction repo of my SO question here for reference:
https://github.com/edorivai/ts-sfc-array

[kiliancs]

Experiencing the same problem using @types/react version 16.0.18.

As simple as ({ name }) => [ <span>Hello</span>, <span>{name}</span> ];

[mergepls]

The problem is still present for 16.0.22

[TheFullResolution]

The problem is still present for 16.0.25

[itsdouges]

Trying to keep as much type safety as I could, I'm typing my SFC that return arrays like this atm:

const MapPage: React.StatelessComponent<Props> = (props): any => [
  <div key={1}>hi</div>
];

[miyamoto-san]

Is this resolved yet? I am having the same issue trying to return a map of items in a SFC

[donaldpipowitch]

No. We'll probably need to wait for microsoft/TypeScript#21699 which is aimed to be included in TypeScript 2.8. There are several steps which need to be implemented first: microsoft/TypeScript#20239 (comment).

[pke]

Since microsoft/TypeScript#20239 (comment) has been closed now, do we still have to wait for microsoft/TypeScript#21699 to get this fixed?

[lukepighetti]

I was able to resolve this by returning my map of items inside a fragment. It's not ideal, but it works.

[lipemat]

To workaround the issue in the meantime I was able to suppress the error by casting the component to any.
In the provided example it would look like this.

const Items: any = ({ items }: MyProps) => items.map(item => <div key={item.id}>{item.name}</div>)

Like other provided workarounds, it's not 100% ideal but it does resolve the issue.

[Spektr]

(#20356 (comment))
as a workaround without :any

function getSingleElement(): JSX.Element {
    return <>{itemsInArray}</>;
}

[eps1lon]

This is essentially a duplicate of #18912. Once microsoft/TypeScript#21699 is resolved we should be able to use ReactNode as a valid return type for function components which includes string and boolean.

[orta]

Hi thread, we're moving DefinitelyTyped to use GitHub Discussions for conversations the @types modules in DefinitelyTyped.

To help with the transition, we're closing all issues which haven't had activity in the last 6 months, which includes this issue. If you think closing this issue is a mistake, please pop into the TypeScript Community Discord and mention the issue in the definitely-typed channel.