Button counter react

  1. What I do not understand about the below, what is wrong with just writing this.updateButton1 why do I have to add .bind(this) how does this make sense that in order to get it to work you have to bind this to this? bind this to itself?
  2. Under updatebutton Why does it not work when just doing +1 why does it have to be +=1
class Buttons extends React.Component {
  state = {clicks1: 0, clicks2: 0};

  updateButton1() {
    this.setState((prevState) => {
      clicks1: prevState.clicks1 += 1
    });
  }

  updateButton2() {
    this.setState((prevState) => {
      clicks2: prevState.clicks2 += 1
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.updateButton1.bind(this)}>{this.state.clicks1}</button>
        <br/><br/>
        <button onClick={this.updateButton2.bind(this)}>{this.state.clicks2}</button>
      </div>
    )
  }
}

//"inject" to DOM
ReactDOM.render(
  <Buttons/>,
  document.getElementById('buttons')
);

You do not have the correct syntax. In fact, you are mutating state by writing

prevState.clicks1 +=1

Remember with arrow functions, if you write { ......... } after the =>, JavaScript thinks you are going to be writing some more lines of code and you would need to explicitly return an object. If you want to implicitly return an object, you need to wrap it inside ( ................. ) (see below)

    this.setState((prevState) => ({
      clicks1: prevState.clicks1 + 1
    }));

It is explained very well in this Medium Free Code Camp article.

Also, if you have not already done so, read the YDKYS this & Object Prototypes section. It explains in great depth how the this binding works.