Definitelytyped: [@types/react] fragments in react 16

[hecof]

• [ ] 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 think you should consider to update these lines of code in order to support react 16 fragments

render(): JSX.Element | null | false | string | JSX.Element[]; //class Component<P, S>
interface ElementClass extends React.Component<any> {
    render(): Element | null | false | string | Element[];
}

https://reactjs.org/blog/2017/09/26/react-v16.0.html

[goenning]

There is an open PR for this #19363

Current workaround is to use public render(): any { } on the components.

[hecof]

Yep! you are right I forgot to mention this workaround . Thanks a lot!

[pabloes]

I'm still having issues with a functional component like this, any idea?

function MyComponent() {
    return [<div>1</div>, <div>2</div>];
}

The :any workaround works, but I would like to avoid it as I have noImplicitAny:false

https://stackoverflow.com/questions/47481482/react-16-fragment-functional-component-and-typescript-ts2605/47481524#47481524

[mekwall]

This issue should be extended to also cover the improvements made to Fragments in React 16.2 that was recently released.

With 16.2 you can return <></> and <React.Fragment></React.Fragment>, none of which currently is supported.

[nicobrinkkemper]

How about this?

const Fragment = (React as any).Fragment;

[ssalka]

For anyone wanting to avoid an extra const, I'm currently doing this:

declare module 'react' {
  class Fragment extends React.Component {}
}

so <React.Fragment> can be used 🙂

[maciejsikora]

Hi All,
something maybe changed in supporting this?

[chibicode]

Should be fixed: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/21950

[nickbreaton]

Just stumbled upon this linked in my codebase. Looks like the issue is fixed now per the comment above and my personal test.

@hecof Might be good to close this.

[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.