@types/react Make it possible to render a string from a functional component

[janb87]

• 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 have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• Mention the authors (see Definitions by: in index.d.ts) so they can respond.
  • Authors: @johnnyreilly, @bbenezech, ...

With current typings it is not possible to create a stateless component which returns a string, number, boolean... (new in React 16)

import React from 'react'

const TestString = () => {
    return 'Test String Component'
}

const Component = () => (
    <div>
        <TestString/>
    </div>
)

Error I get:

JSX element type 'string' is not a constructor function for JSX elements.

The first problem is that currently in the typings a stateless component cannot return anything else besides an instance of a React.Element. This should be changed to (I think, I've based it upon the changes on the rendermethod, see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L422)

interface StatelessComponent<P = {}> {
        (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | Array<ReactElement<any>> | string | number | null;
        propTypes?: ValidationMap<P>;
        contextTypes?: ValidationMap<any>;
        defaultProps?: Partial<P>;
        displayName?: string;
}

Second problem is that behind the scenes the compiler will convert the jsx to `React.createElement('Test String Component', null)``

I get a compiler error that is saying that this is not a valid value. Seems that it has to be one of the values specified in following list: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L3465.

Any thoughts on how this can be fixed?

[janb87]

@DovydasNavickas @sandersn @tkrotoff @Andy-MS @ddwwcruz @apexskier @devrelm @RyanCavanaugh @richseviora @onigoetz @minestarks @yuit @sboehler @plantain-00 @p-jackson @miracle2k @voxmatt @morcerf @janechu @gaspard @vbfox @ericanderson @dyst5422 @RapiLabs @cynecx @newyankeecodeshop

[apexskier]

We could probably define stateless and class based components as returning ReactNode now. I haven't migrated to v16 yes, so that would need testing.

Looks like there's already a PR open. #20097

[levino]

Is this being worked on atm?

[polco]

I tried changing it but it breaks the JSX parser if the return type is string boolean or undefined.

[vbfox]

There is a TypeScript PR in progress about it : microsoft/TypeScript#20239 (Well its about arrays but it's generally how TS should know what is allowed in a JSX component)

[polco]

Cool, thanks for the update!

[jasonrhodes]

What's the latest on this? I see the TS PR mentioned above (microsoft/TypeScript#20239) is now closed/locked. I ran into the same thing today, new to typescript + react, and wondering why my components can't return strings suddenly...

[sonnyp]

A workaround is to return a fragment.

return <>0</>

[zheeeng]

Any news on this issue?

[eltonio450]

Hello, any update or hints on this please :) ?

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