React class function arrow

Question

In this code, if I write add function like add = function(){} or add(){} , then I doesn't work. Are there some reasons?

    class App extends.React.Component{
state = {

count: 0

};
    add = () => {
        console.log(‘add’);
        this.setState({count: this.state.count + 1});
      }
      minus = () => {
        console.log(‘minus’);
        this.setState({count: this.state.count - 1});
      }
      render(){
        return <div><Potato />
        <div>class Component : {this.state.count}</div>
        <button onClick={this.add}>add</button>
        <button onClick={this.minus}>minus</button>
        </div>
      }
    }

Assuming your *actual* code doesn't have typos like `Componen` and has `state`, are you asking why `Cannot read property 'count' of undefined` error is thrown when using `function`s? — Drew Reese, May 25 '21 at 07:49
Thank you guys but still, it doesn't work If I use arrow function, it works... the Error said TypeError: Cannot read property 'setState' of undefined — Dain Park, May 25 '21 at 07:56
I solved this problem because of hoisting I changed this.add => this.add.bind(this) — Dain Park, May 25 '21 at 08:00

score -1 · Answer 1 · answered May 25 '21 at 07:54

class App extends React.Component {
  state = {
    count: 0,
  };
  add = () => {
    console.log("add");
    this.setState({ count: this.state.count + 1 });
  };
  minus = () => {
    console.log("minus");
    this.setState({ count: this.state.count - 1 });
  };
  render() {
    return (
      <div>
        {/* <Potato /> */}
        <div>class Component : {this.state.count}</div>
        <button onClick={this.add}>add</button>
        <button onClick={this.minus}>minus</button>
      </div>
    );
  }
}

export default App;

correct typos and added state

React class function arrow

1 Answers1