Error param type in React app written in Typescript

Question

I'm using atom-typescript package and I have made a simple example. Here is it:

import * as React from "react"

interface Props {}

export class HelloWorld extends React.Component<Props, {}> {
  render() {
    return <div>Hello World</div>;
  }
}

---

import * as React from "react"

import * as HelloWorld from "./components/HelloWorld"

React.render(
  React.createElement(HelloWorld, null),
  document.getElementById('app')
);

The problem is that I get this error:

at line 6, file /Users/mazzy/vagrant-devbox/expressjs-typescript/app/app.tsx Argument of type 'typeof "/Users/mazzy/vagrant-devbox/expressjs-typescript/app/components/HelloWorld"' is not assignable to parameter of type 'ComponentClass<any>'.

Obviously I have installed react.d.ts file. Have any idea about this?

Answer 1

You're trying to use the entire module instead of its exported member. In this case, you'd need to use React.createElement(HelloWorld.HelloWorld, null); to access the member.

Alternatively, change your import to import {HelloWorld as HelloWorld} from ...