React stateless functional components

let ByComponentIoS = ({ name: string })=> <h1>{name}</h1>

export default class ByComponent extends React.Component<IByComponentProps,{}> { 

    constructor(props: IByComponentProps) {
        super(props);    
    }
    render() {
        return <ByComponentIoS name="test"/>

    }
}

I get error TS2605: JSX element type 'Element' is not a constructor function for JSX elements.Property 'render' is missing in type 'Element'.

How to fix it?

I haven't tried your example but ByComponentIos has a wrong signature. You have to use

let ByComponentIoS = ({ name } : { name : string })=> <h1>{name}</h1>

Could you explain why?

You can take a look at the JS output: http://www.typescriptlang.org/Playground#src=let%20ByComponentIoS%20%3D%20(%7B%20name%20%3A%20string%20%7D)%20%3D%3E%20%22%22%3B%0D%0A

It seems to use destructuring to extract "name" from the parameter and give it the name "string".

https://blog.mariusschulz.com/2015/11/13/typing-destructured-object-parameters-in-typescript

Still, the error remains. TSX in 1.6 doesn't seem to support stateless functional components. Is there a plan to add support for those?

#5596 will implement support for them

Ryan Cavanaugh (@RyanCavanaugh)

Ryan Cavanaugh (@RyanCavanaugh) Was this issue ever solved? Can you help with this perhaps? - http://stackoverflow.com/questions/34749564/typescript-react-0-14-stateless-functional-components/34752460

Tom Enden (@tomenden)

Tom Enden (@tomenden) the posted code has both syntactic and (unrelated) semantic errors, and the shown error refers to an identifier that isn't even in the provided code. I don't think that question can be answered as written today.

Ryan Cavanaugh (@RyanCavanaugh)

Ryan Cavanaugh (@RyanCavanaugh) OK, I will fix it, was written real quickly and perhaps without enough attention, my apologies. Could you please clarify how you would write in Typescript the following example from the official React Docs:

var Aquarium = ({species}) => (
  <Tank>
    {getFish(species)}
  </Tank>
);
// Then use: <Aquarium species="rainbowfish" />

I see a similar issue open here - DefinitelyTyped/DefinitelyTyped#7468

Tom Enden (@tomenden)

Tom Enden (@tomenden) that is literally the code you would write.

Expanded self-contained example:

declare function getFish(x: any): any;
declare var Tank: any;

var Aquarium = ({species}) => (
  <Tank>
    {getFish(species)}
  </Tank>
);
// OK
let x = <Aquarium species="rainbowfish" />
// Error
let y = <Aquarium specie="rainbowfish" />

C:\github\TypeScript>node built\local\tsc.js --jsx preserve a.tsx C:\github\DefinitelyTyped\react\react-global.d.ts a.tsx(12,9): error TS2324: Property 'species' is missing in type 'IntrinsicAttributes & { species: any; }'.

Ryan Cavanaugh (@RyanCavanaugh)

Ryan Cavanaugh (@RyanCavanaugh) - thank you for your replies, I appreciate your help.
I tried a minimal example and just copied what you provided, and I still can't get it to work:

import * as React from 'react'
declare function getFish(x: any): any;
declare var Tank: any;

var Aquarium = ({species}) => (
  <Tank>
      {getFish(species)}
  </Tank>
);
let x = <Aquarium species="rainbowfish"/>;

I still get this error:
(10,9): error TS2605: JSX element type 'Element' is not a constructor function for JSX elements.

Note the error is in regards to the usage of the Component (let x declaration). It seems as if the definition file for React is not allowing this as a valid JSX. I am using the latest React 0.14 definition file from tsd, what am I doing wrong?

Thanks

Ryan Cavanaugh (@RyanCavanaugh)

Ryan Cavanaugh (@RyanCavanaugh) - Sorry for the misunderstanding, I just noticed now that this issue is marked as Typescript 1.8 milestone, and I am currently using the last stable release (1.75), since the combination of tslint and tslint-loader for webpack require this. I just tested the lines of code using the nightly builds (typescript@next) and it works

Thanks for the follow-up -- glad the nightly build is working for you. Let me know if you see anything weird there.

Navigation Menu

Repository navigation

React stateless functional components #5675

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

React stateless functional components #5675

Description

Activity

Lenne231 commented on Nov 16, 2015

Shadowfaxenator commented on Nov 16, 2015

Lenne231 commented on Nov 16, 2015

Lenne231 commented on Nov 16, 2015

wereHamster commented on Nov 23, 2015

RyanCavanaugh commented on Nov 23, 2015

tomenden commented on Jan 13, 2016

RyanCavanaugh commented on Jan 13, 2016

tomenden commented on Jan 13, 2016

RyanCavanaugh commented on Jan 13, 2016

tomenden commented on Jan 16, 2016

tomenden commented on Jan 16, 2016

RyanCavanaugh commented on Jan 19, 2016

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions