How to properly bind to this in react?

Question

JavaScript

import React from 'react';
import Counter from './components/Counter';

class App extends React.Component {
  state = {
    counter: 0,
  };

  render() {
    return (
      <main>
        <h1>React Camp</h1>
        <Counter
          title='Simple counter'
          counter={this.state.counter}
          handleIncrement={this.handleIncrement}
        />
      </main>
    );
  }

// ver 1
//  handleIncrement() {
//    this.setState((state) => ({ counter: state.counter + 1 }));
//  }

// ver 2
//  handleIncrement = () =>
//    this.setState((state) => ({ counter: state.counter + 1 }));
}

export default App;

Why won't ver 1 work but ver 2 will?
Because the arrow function does not have a binding to this and the closure fires?

Answer 1

because arrow functions do not contain their own this context

Answer 2

Switch to functions, less code, convenient. Especially now there are hooks.