Definitelytyped: React components with multiple root elements are not supported

[xMihai]

• [X] I tried using the @types/react package and had problems.
• [X] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [X] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [X] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) 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/[email protected]

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> ];

[ericlam51]

The problem is still present for 16.0.22

[TheFullResolution]

The problem is still present for 16.0.25

[madou]

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 https://github.com/Microsoft/TypeScript/issues/21699 which is aimed to be included in TypeScript 2.8. There are several steps which need to be implemented first: https://github.com/Microsoft/TypeScript/pull/20239#issuecomment-363372640.

[pke]

Since https://github.com/Microsoft/TypeScript/pull/20239#issuecomment-363372640 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]

(https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20356#issuecomment-435708501)
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.