Typescript definition for SFC returning fragment/string

Do you want to request a feature or report a bug?

Most likely a bug

What is the current behavior?

https://codesandbox.io/s/r555ro878p

If you open that sandbox and wait for a compiler to catch up, you see that TextReturningComponent has an error. It is expecting ReactElement<any> | null to be returned.

const TextReturningComponent: React.SFC = () => 'sometext'

What is the expected behavior?

Based on the blog post it should be possible to have a component like that. Is that correct?

Looking at the type definition for render method it has return type ReactNode which is correct. However, the SFC declaration looks like this…

interface StatelessComponent<P = {}> {
  (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null;
}

I assume this is just an oversight and there should be ReactNode type as well? In case that’s true, I am able to create PR for that. Correct me if I am missing something here, please 😃

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

"react": "^16.2.0",
"@types/react": "16.0.36",

[gaearon]

Also, note that there are currently no differences between what an SFC can return, and what a class component can return in render. They have full feature parity.

[danielkcz]

I’ve just noticed that returning fragment works just fine (could be a current workaround)

const TextReturningComponent: React.SFC = () => (
  <>
    'sometext'
  </>
)

Looking closely at this, the fragment return type is JSX.Element which is declared as interface Element extends React.ReactElement<any> { } and that’s correct. However, a string is just a string.