Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React components with multiple root elements are not supported #20356

Closed
4 tasks done
xMihai opened this issue Oct 6, 2017 · 16 comments
Closed
4 tasks done

React components with multiple root elements are not supported #20356

xMihai opened this issue Oct 6, 2017 · 16 comments

Comments

@xMihai
Copy link
Contributor

xMihai commented Oct 6, 2017

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
Copy link
Contributor

tkrotoff commented Oct 6, 2017

See PR #19363

@danedavid
Copy link

danedavid commented Oct 12, 2017

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
Copy link
Contributor Author

xMihai commented Oct 13, 2017

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
Copy link
Contributor

edorivai commented Oct 13, 2017

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

@kiliancs
Copy link
Contributor

kiliancs commented Oct 27, 2017

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

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

@mergepls
Copy link
Contributor

mergepls commented Nov 13, 2017

The problem is still present for 16.0.22

@TheFullResolution
Copy link

TheFullResolution commented Nov 17, 2017

The problem is still present for 16.0.25

@madou
Copy link

madou commented Nov 17, 2017

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
Copy link

miyamoto-san commented Feb 7, 2018

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

@donaldpipowitch
Copy link
Contributor

donaldpipowitch commented Feb 7, 2018

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
Copy link

pke commented Sep 6, 2018

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

@lukepighetti
Copy link

lukepighetti commented Nov 4, 2018

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

@lipemat
Copy link

lipemat commented May 15, 2019

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
Copy link

Spektr commented Dec 2, 2019

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

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

@eps1lon
Copy link
Contributor

eps1lon commented Aug 13, 2020

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
Copy link
Collaborator

orta commented Jun 7, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests