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.

Start by reading the linked tutorial sections on lifting state up and function components, then compare the two onClick examples and the accompanying explanation. Check whether the class-component example needs clarification about passing a callback versus invoking it. Done means the tutorial clearly explains why both forms work and when the shorter form is appropriate.