React stateless functional components

[Shadowfaxenator]

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?

[Lenne231]

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

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

[Shadowfaxenator]

Could you explain why?

[Lenne231]

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

[Lenne231]

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

[wereHamster]

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?

[RyanCavanaugh]

#5596 will implement support for them

[tomenden]

@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

[RyanCavanaugh]

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

[tomenden]

@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

[RyanCavanaugh]

@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; }'.