Definitelytyped: [@types/react]: React.Fragment does not have any construct or call signatures

Created on 3 Dec 2017  ·  3Comments  ·  Source: DefinitelyTyped/DefinitelyTyped

  • [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: @uniqueiniquity, @tkrotoff, @vsiao,

There was some discussion about the proper type of React.Fragment in #21146, but while symbol | number might accurately reflect the internal React type for Fragment, it prevents React.Fragment from being used as a TSX element.

<React.Fragment> // error here: React.Fragment does not have any construct or call signatures
  <div>Child 1</div>
  <div>Child 2</div>
</React.Fragment>

I realize we can render fragments using the <></> syntax, but the React docs state that this simply de-sugars to <React.Fragment></React.Fragment> and that this is the only way to add keys to a fragment.

Therefore, I think the type of React.Fragment should be changed to something closer to React.ComponentType<{}>, which will give it key and children props.

I can open a PR if people agree with this proposal.

Most helpful comment

@uniqueiniquity Sounds good. I have a branch ready to go if fixing it in TS is not possible/practical.

All 3 comments

Thanks for catching this, @jgoz!
I think the better approach might be for us to fix this on TypeScript's side, rather than changing the type of React.Fragment to hack around the compiler's behavior.
I'll look into this and see if that is the best approach.

@uniqueiniquity Sounds good. I have a branch ready to go if fixing it in TS is not possible/practical.

@jgoz Go ahead and open the PR. After some discussion here it sounds like you have the right approach for the time being.

Was this page helpful?
0 / 5 - 0 ratings