Reactj, typescript Property 'setState' is missing in type

Question

I'm getting a ts error from my react component. The component is running fine, building etc, however typescript is showing an error inside the ide. Not sure how i need to declare this to remove the error. I've tried to create a setState method inside the component itself, but this was giving even more errors.

Error:(15, 19) TS2605:JSX element type 'Home' is not a constructor function for JSX elements. Property 'setState' is missing in type 'Home'.

"typescript": "^2.3.4",

"react": "^15.5.4",

"react-dom": "^15.5.4",

!----

export class App extends React.Component<Props, State> {
  public state: State
  public props: Props

 constructor(props: Props) {
  super(props)
  this.state = {
    view: <Home />, <<<<
    }

-- the rest removed for brevity

export class Home extends React.Component<Props, State> {
public state: State;
public props: Props;

constructor(props: Props) {
    super(props)

}
  public render() {
    return <h1>home</h1>
  }
}

You should not put a component instance in your state. Instead, you need to put the props of this component in your state and then create it in the render function. — Nitzan Tomer
– Nitzan Tomer, Commented Jun 15, 2017 at 13:31
oh right, I was essentially binding each view using this.setState({view:<Home />}) and then under the render method just rendering the view like: {this.state.view}. I wanted to use it as a basic router, which, it is working, but generates the ts errors in the ide. — Jimi
– Jimi, Commented Jun 15, 2017 at 13:57
That's not how it should be done. The state needs to stay simple. Never hold components in the state or props — Nitzan Tomer
– Nitzan Tomer, Commented Jun 15, 2017 at 14:02
ok, so you suggest I use react router or something to manage this? — Jimi
– Jimi, Commented Jun 15, 2017 at 14:05

Telmo Trooper · Accepted Answer · 2018-09-17 11:31:31Z

10

Had the same issue, but my problem was that I was importing React wrong.

The correct way to import it when using TypeScript is with import * as React from "react".

Code example:

import * as React from "react"
import ReactDOM from "react-dom"

class App extends React.Component<any, any> {
  render() {
    return (
      <div>Hello, World!</div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("app"))

Note: <any, any> allows you to use any props and state variables in your React component, but you should usually define those yourself to take advantage of TypeScript's type annotations.

answered Sep 17, 2018 at 11:31

Telmo Trooper

5,7942 gold badges33 silver badges37 bronze badges

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

1 Comment

Marcus Ekström Over a year ago

Or if you have a variable initialState you can do type State = typeof initialState and get all the atomic types

Nitzan Tomer · Accepted Answer · 2017-06-15 15:05:53Z

Here's an example of how to use the state and render the components:

type HomeProps = {
    text: string;
}
class Home extends React.Component<HomeProps, void> {
    public render() {
        return <h1>{ this.props.text }</h1>
    }
}

type AppState = {
    homeText: string;
}
class App extends React.Component<void, AppState> {
    constructor() {
        super();

        this.state = {
            homeText: "home"
        };

        setTimeout(() => {
            this.setState({ homeText: "home after change "});
        }, 1000);
    }

    render() {
        return <Home text={ this.state.homeText } />
    }
}

As you can see, the props and state objects are always simple, and the rendering method is in charge of creating the actual components.
This way react knows which components are changed and which parts of the DOM tree should be updated.

Collectives™ on Stack Overflow

Reactj, typescript Property 'setState' is missing in type

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related