Is it possible to remove the extra arrow function here?

Hi!
The tutorial has an example like this:

class Square extends React.Component {
  render() {
    return (
      <button
        className="square"
        onClick={() => this.props.onClick()}
      >
        {this.props.value}
      </button>
    );
  }
}

This component used in the Board component like this:

renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

We have closed the context in a function that we pass to onClick in the Board component.
But why don't we just pass this.props.onClick to onClick in the Square component? Why are we using closures here if we already have the right context inside?

I wrote like this: (link to codepen)

class Square extends React.Component {
  render() {
    return (
      <button
        className="square"
        onClick={this.props.onClick}
      >
        {this.props.value}
      </button>
    );
  }
}

This works successfully

It is clear that the variant from the tutorial will also work. But further it says:

When we modified the Square to be a function component, we also changed onClick={() => this.props.onClick()} to a shorter onClick={props.onClick} (note the lack of parentheses on both sides).

So my variation only works in a functional component? But above it also worked in class components. I think this might confuse some people.

Commencez par lire les sections liées du tutoriel sur la remontée de l’état et les composants fonctionnels, puis comparez les deux exemples de onClick et l’explication qui les accompagne. Vérifiez si l’exemple de composant de classe doit préciser la différence entre transmettre un callback et l’invoquer. C’est terminé lorsque le tutoriel explique clairement pourquoi les deux formes fonctionnent et dans quels cas la forme plus courte est appropriée.