TypeScript ReactDOM Property 'type' is missing on component

Question

Getting the following error:

Error   TS2345  Argument of type 'typeof SomeComponent' 
is not assignable to parameter of type 'ReactElement<{}>'.
Property 'type' is missing in type 'typeof SomeComponent'.

Got the following code typescript code:

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface IProps{}    
interface IState {}

class SomeComponent extends React.Component<IProps, IState> {
    render() {
        return <div />;
    }
}

var component = SomeComponent;
var root = document.getElementById("root");

ReactDOM.render(component , root);

I tried the following:

class SomeComponent extends React.Component<IProps, IState> {
    render() {
        return <div />;
    }

    get type() {
        return "test";
    }
}

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

Should be something like:

interface IProps{}    
interface IState {}

class SomeComponent extends React.Component<IProps, IState> {
    render() {
        return <div />;
    }
}

ReactDOM.render(<SomeComponent /> , document.getElementById("root"));

You don't pass the component class to the render function, you need to pass the instance.

Edit

This:

var component = SomeComponent;

Assigns a reference to the class SomeComponent into the component variable, meaning that if you do that then you can do both and they are the same:

var componentInstance1 = <SomeComponent />
var componentInstance2 = <component />

If you don't want to use the jsx/tsx notation then when constructing the component you need to pass the props:

var component = new SomeComponent(props);

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 21, 2016 at 21:37

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

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

8 Comments

Michal Ciechan Over a year ago

Doesn't this make it an instance? var component = SomeComponent;

Michal Ciechan Over a year ago

Will ask another question why.

Nitzan Tomer Over a year ago

No. SomeComponent is a class not an instance of that class. Usually you'll get an instance with the new keyword (new SomeComponent()) but you use jsx so <SomeComponent /> does that work for you

Michal Ciechan Over a year ago

lol. Ok I get it, so var x = SomeComponent, sets the typeof(SomeComponent) to var x. so was missing ` var component = new SomeComponent();` Thanks!

Michal Ciechan Over a year ago

Will mark it as answer in 4 min once i can (time limit)

|

Collectives™ on Stack Overflow

TypeScript ReactDOM Property 'type' is missing on component

1 Answer 1

Edit

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related