Typescript: Property 'setState' does not exist on type 'App'.ts(2339)

[behnood-eghbali]

TypeScript Version: 3.4.5
React Version: 16.8.6
CRA Version: 3.0.1

Search Terms: React

Code

import React, {Component} from 'react';

interface Contact {
  name: string;
  number: string;
}

interface State {
  newContact: Contact;
  contacts: Contact[];
}

export default class App extends Component<{}, State> {

  state = {
      newContact: { name: '', number: ''}, 
      contacts: []
    };

  handleNameChange() {
    this.setState({}); //Property 'setState' does not exist on type 'App'.ts(2339)
  }
    render() {
        return (
          <div className="MyApp">
            <header className="MyApp-header">
            </header>
            <input type="text" onChange={this.handleNameChange} />
          </div>
        );
    }
}

Expected behavior:
No type errors

Actual behavior:
setState type error ts(2339)

Related Issues:

3263 #12793

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33697
https://github.com/facebook/react/issues/15052

[IllusionMH]

@behnood-eghbali not sure if related, but handleNameChange method isn't bound to App instance, so when you pass it to onChange event handler this won't be pointing to App instance and you'll ahve runtime error.
You should bind method in constructor or use instance properties

class App {
// ...
handleNameChange = () => {this.setState({});}
// ...
}

inside class

[behnood-eghbali]

@IllusionMH Thank you for your attention and comment, but it's not related to this error. I get this error every time I write _setState_:

Believe me. I checked everything multiple times. :)

[behnood-eghbali]

By the way, I also posted this issue on Reddit: https://www.reddit.com/r/reactjs/comments/bjgval/beginners_thread_easy_questions_may_2019/eok08j5?utm_source=share&utm_medium=web2x

[RyanCavanaugh]

It looks like this is a question rather than a bug report. This issue tracker is for tracking bugs and active work on TypeScript itself, rather than a general forum for programmers using TypeScript to get help or ask questions.

You can ask questions on sites like Stack Overflow. We are not able to provide one-on-one support on the issue tracker. Please read the issue template carefully - it has important information on what kinds of reports can be acted on here, as well as links to useful TypeScript resources. Thanks!

[davidgilbertson]

For visitors from the future ... npm i @types/react -D resolved this for me.

[SiaQnbr]

For visitors from the future ... npm i @types/react -D resolved this for me.

Thanks, David. I had a lot of searches for this problem, and finally you saved me!

[tjmosia]

For visitors from the future ... npm i @types/react -D resolved this for me.

Sometimes you may have your @types/react installed and it still wouldn't work. You just need to make sure you import react correctly.

import * as React from 'react';

I came to realize that inside ...react/index.d.ts file, React is not exported as default. So you need to import everything exprted from that file as React. There's many other exports within the same file.

Here's what's on the file:

export = React; 
export as namespace React;