0

This is my code:

import React, { Component } from 'react';

class Counter extends Component {
    constructor(props){
        super(props);
        this.state = {
            number : 0
        };

        this.handleIncrease = this.handleIncrease.bind(this);
        this.handleDecrease = this.handleDecrease.bind(this);
    }

    handleIncrease = () => {
        this.setState=({
            number: this.state.number + 1
        });
        console.log("handleIncrease()");
    }
    handleDecrease = () => {
        this.setState({
            number: this.state.number - 1
        });
        console.log("handleDecrease()");
    }

    render(){
        return (
            <div>
                <hr/>
                <h1>Counter</h1>
                <p>number : {this.state.number}</p>
                <button onClick={this.handleIncrease}>+</button>
                <button onClick={this.handleDecrease}>-</button>
                <hr/>
            </div>
        )
    }
}

export default Counter;

It works when I press the - button, but it does not work when I press the + button and I get an error:

TypeError: _this.setState is not a function Counter._this.handleDecrease

2
  • 4
    this.setState=(, remove = before ( in handleIncrease function.
    – Prasun
    Nov 4, 2018 at 6:25
  • thank you!!!!! so much!!!!!!!!!!!!! !!!!!!!!!!!! wow!!!!!!!!! i m stupid!!!
    – S H Choi
    Nov 4, 2018 at 6:31

2 Answers 2

0

Remove the equal sign:

handleIncrease = () => {
    >>>> this.setState({
       number: this.state.number + 1
     });
     console.log("handleIncrease()");
    }

Also, pass a function in setState when using the previous state to set new state as state updates can be asynchronous.

More Info: https://reactjs.org/docs/state-and-lifecycle.html

0
import React, { Component } from 'react';

class Counter extends Component {
    constructor(props){
        super(props);
        this.state = {
            number : 0
        };

        this.handleIncrease = this.handleIncrease.bind(this);
        this.handleDecrease = this.handleDecrease.bind(this);
    }

    handleIncrease = () => {
       //here remove equal
        this.setState({
            number: this.state.number + 1
        });
        console.log("handleIncrease()");
    }
    handleDecrease = () => {
        this.setState({
            number: this.state.number - 1
        });
        console.log("handleDecrease()");
    }

    render(){
        return (
            <div>
                <hr/>
                <h1>Counter</h1>
                <p>number : {this.state.number}</p>
                <button onClick={this.handleIncrease}>+</button>
                <button onClick={this.handleDecrease}>-</button>
                <hr/>
            </div>
        )
    }
}

export default Counter;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.