React's StatelessComponent results in error

If you create a stateless element like:

var Hi:React.StatelessComponent<{}> = 
          (props)=><h1>User info</h1>;

Everything is fine so far.
But when you try to use it inside another component like:

var Hello:React.StatelessComponent<{}> = 
          (props)=> <div><Hi></div>;

you will get an error (where you tried to use the Hi component):

Error:(9, 3) TS2605: 
JSX element type 'ReactElement<any>' is not a constructor function for JSX elements.
Property 'render' is missing in type 'ReactElement<any>'.

@vsiao

pinging @vsiao since he seems to be the one who added the type definition for StatelessComponent

@RyanCavanaugh

Sorry, I don't use JSX/TSX. Maybe @RyanCavanaugh can help you.

@pdeva

@pdeva did you find a way to solve this issue?

@pdeva

@pdeva - I believe this has been fixed in TypeScript 1.8 - they improved their TSX to handle stateless components.

Right, that's fixed in 1.8:

microsoft/TypeScript#5675

There's still a problem with children though:

const Foobar = ({ children }: { children: ReactNode[] }) => <div>{children}</div>

error TS2324: Property 'children' is missing in type 'IntrinsicAttributes & { children: (ReactElement<any> | string | number | {} | (ReactElement<any> ...'.

Could make that optional though, or is there a nicer way?

I bumped into the children error and it's annoying. Does anyone know how I can circumvent it until it's being fixed?

I've been looking for a way to cast a JSX component to any, to no avail.

Something like:

<Parent as any>
    <Children/>
</Parent>

@Strato

@Strato What about optionals as I suggested? Better than casting stuff to any. You know, like this:

const Foobar = ({ children }: { children?: ReactNode[] }) => <div>{children}</div>

I didn't understand this was possible. Thank you.

Hope it gets fixed soon in the definition, as it's a pretty common pattern.

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.

Navigation Menu

Repository navigation

React's StatelessComponent results in error #7468

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

React's StatelessComponent results in error #7468

Description

Activity

pdeva commented on Jan 3, 2016

vsiao commented on Jan 4, 2016

tomenden commented on Jan 13, 2016

SethDavenport commented on Feb 21, 2016

stroborobo commented on Mar 18, 2016

Strato commented on Apr 14, 2016

stroborobo commented on Apr 14, 2016

Strato commented on Apr 14, 2016

orta commented on Jun 7, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions