Get prevstate in react without es6 script

Question

I write some script that will counting the number when we click the button in reactjs. This is my script:

var ComponentCounter = React.createClass({
    getInitialState: function() {
    return {count: 1};
  },
  doIncrement:function(){
    this.setState(function(prevState,currentProps){
        return {
        count:prevState.count+1
      };
    });
  },
  doDecrement:function(){
    this.setState(function(prevState,currentProps){
        return {
        count:prevState.count-1
      };
    });
  },
    render: function(){
    return(
        <div>
            <Button onClick={this.doIncrement}>+</Button>
            <h2>{this.state.count}</h2>
            <Button onClick={this.doDecrement}>-</Button>
      </div>);  
  }
});
ReactDOM.render(<ComponentCounter/>,document.getElementById('counter'));

But it doesn't work either when I clicked the button.

Can you fixed it and explain why?

Thanks :)

oopss i forgot that Button tag is my react component ..v . – cahyowhy Feb 15 '17 at 16:13 — cahyowhy, Feb 15 '17 at 16:13
so your problem is settled? – Damien Leroux Feb 15 '17 at 16:47 — Damien Leroux, Feb 15 '17 at 16:47

score 0 · Answer 1 · answered Feb 16 '17 at 10:33

You should bind context to your click handler method. Otherwise this inside the method will no longer point to component instance when the function is actually called. So you should do this:

   <Button onClick={this.doIncrement.bind(this)}>+</Button>
   <h2>{this.state.count}</h2>
   <Button onClick={this.doDecrement.bind(this)}>-</Button>

score 0 · Answer 2 · answered Feb 28 '17 at 15:45

If @Bartek's answer didn't fix your problem, another area to look at is your Button component... are you passing the onClick props to an actual DOM element?

var Button = createClass({
   ...
   render: function() {
     return <button onClick={this.props.onChange}>{this.props.children}</button>;
     //or
     return <button {...this.props} />;
   }
});

Get prevstate in react without es6 script

2 Answers2