Correct syntax for React.createElement in TypeScript/JSX

Question

I cannot get React.createElement to compile in TypeScript.

interface IColorPickerProps {

}

interface IColorPickerState {

}

class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> { 
    constructor(props: IColorPickerProps) {
        super(props);
    }
}

Component creation:

let props: any = {}
React.createElement(ColorPicker, props)

I get this compile error:

Argument of type 'typeof ColorPicker' is not assignable to parameter of type 'string | ComponentClass<IColorPickerProps> | StatelessComponent<IColorPickerProps>'.
  Type 'typeof ColorPicker' is not assignable to type 'StatelessComponent<IColorPickerProps>'.
    Type 'typeof ColorPicker' provides no match for the signature '(props: IColorPickerProps & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.

If I remove the constructor, the error goes away. I cannot use the syntax as props needs to be passed dynamically. Any ideas?

Why React.createElement(ColorPicker, props) while you can just <ColorPicker/>? — Harry
– Harry, Commented Nov 30, 2017 at 20:54
Because props are passed dynamically as a parameter to the class that creates the ColorPicker. <ColorPicker myProp={props["name"]}/> would lose compile time checking, while React.createElement(ColorPicker, props) does not. — olivierr91
– olivierr91, Commented Dec 1, 2017 at 22:11

becks · Accepted Answer · 2017-11-30 20:55:41Z

1

The code you have compiles fine for me when I run filename.tsx, then node filename.js. Is There other code that you have along with this?

The whole point of typing the props in the class, is so you know what will be passed to your ColorPicker class. In my opinion, the best thing to do would be to fix your IColorPickerProps interface to include the props that will be passed like this.

interface IColorPickerProps {
    name: string,
    age: number
}

And then

let myprops: IColorPickerProps = {
    name: ...
    age: ...
}

If you are typing your props as any, then you're sort of defeating the purpose of type-checking.

answered Nov 30, 2017 at 20:55

becks

115 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

olivierr91 Over a year ago

You are right, it does compile. I am using VS Code and live TypeScript checking does give me the error, but it compiles fine. Any idea why? As for the type-checking, this is a special factory class that doesn't know what props are being received, props must be passed dynamically.

becks Over a year ago

I'm a bit confused on what you mean by what props are being received. Are there different numbers of props being sent, or are the props different types each time?

olivierr91 · Accepted Answer · 2017-12-11 19:25:51Z

0

I have solved the problem by upgrading to latest version of React and latest version of the type definitions, this was probably a problem with the type definitions I was using. Thank you all for your help

answered Dec 11, 2017 at 19:25

olivierr91

1,4473 gold badges14 silver badges38 bronze badges

Collectives™ on Stack Overflow

Correct syntax for React.createElement in TypeScript/JSX

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related