React/Typescript : this.setState is not a function

Question

I am work in react + typescript for first time.

interface IState {
  stateval: number;
}
class Forgotpassword extends React.Component<any, IState> {
  constructor(props: any){
    super(props);
    this.state = { stateval: 1 };
  }
  public submit() {  
    this.setState({ stateval:2 });
  }
  public render() {
    const { stateval} = this.state;
    return (
      <div className="App">
        <Button onClick={this.submit}>Send OTP</Button>
      </div>
    );
  }
}

When i click the submit button it throws

Uncaught TypeError: this.setState is not a function

add this.submit = this.submit.bind(this); to your constructor. — Chris
– Chris, Commented Mar 4, 2019 at 11:36
<Button onClick={() => this.submit}>Send OTP</Button> or public submit = () => { this.setState({ stateval:2 }); } — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Mar 4, 2019 at 11:37
the this context of the button, is the button. you need to bind the submit function to the ForgotPassword class — amyloula
– amyloula, Commented Mar 4, 2019 at 11:37

Edison Junior · Accepted Answer · 2019-03-04 11:43:14Z

4

you need to bind your method or trasform in functional like

interface IState {
  stateval: number;
}
class Forgotpassword extends React.Component<any, IState> {
  constructor(props: any){
    super(props);
    this.state = { stateval: 1 };
  }
  const submit = () => {  
    this.setState({ stateval:2 });
  }
  const render = () => {
    const { stateval} = this.state;
    return (
      <div className="App">
        <Button onClick={this.submit}>Send OTP</Button>
      </div>
    );
  }
}

i hope it useful

answered Mar 4, 2019 at 11:43

Edison Junior

3201 silver badge7 bronze badges

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

3 Comments

San Daniel Over a year ago

is there a way to print object, since JSON.stringify() & conssole.log() is not working in typescript

Edison Junior Over a year ago

try to print a simple string first, console.log("Hi") if it work, console.log it's ok, it have to work

San Daniel Over a year ago

worked after adding rule "no-console": false in tslint.json file, thanks

Josh Kelly · Accepted Answer · 2019-03-04 11:42:40Z

2

There's no need to add the constructor method or use bind. An arrow function is fine for your needs.

import React, { Component } from 'react';

interface IState {
  stateval: number;
}

export default class Forgotpassword extends Component<any, IState> {
  state = {
    stateval: 2
  }

  public submit = () => this.setState({ stateval: 2 });

  public render() {
    return (
      <div className="App">
        <Button onClick={this.submit}>Send OTP</Button>
      </div>
    );
  }
}

answered Mar 4, 2019 at 11:42

Josh Kelly

9985 silver badges12 bronze badges

Comments

dev · Accepted Answer · 2019-03-04 11:37:14Z

0

Please bind your submit function to this :

this.submit = this.submit.bind(this)

answered Mar 4, 2019 at 11:37

dev

3132 silver badges9 bronze badges

Collectives™ on Stack Overflow

React/Typescript : this.setState is not a function

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related