How does the event handler in React?

There is code:
Square function(props) {
 return (
<button
className="square"
onClick={props.onClick}
>
{props.value}
</button>
);
}

class Board extends React.Component {
 state = {
 squares: Array(9).fill(null)
}

 handleClick(i) {
 const squares = this.state.squares.slice();
 squares[i] = 'X';
 this.setState({squares: squares});
}

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

 render() {
 const status = 'Next player: X';

 return (
the <div>
 <div className="status">{status}</div>
 <div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
 <div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
 <div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}



Why in the Square function(props) onClick={props.onClick} are written without brackets??
so 
onClick={props.onClick}

not so
onClick={props.onClick()}

If you look at this when on obrabotki it is necessary to invoke (https://learn.javascript.ru/introduction-browser-e...
April 4th 20 at 13:23
1 answer
April 4th 20 at 13:25
Solution
In curly brackets you write the JavaScript code. Accordingly, if you write onClick={props.onClick()}, it will be a function call, and the result of this call will be assigned to the property onClick of the button. And it is necessary that it was a function, which is achieved by stitching onClick={props.onClick}.
@dessie_Buckrid so here onClick={props.onClick} creates a handler
I need to call props.onClick when clicking, not to place props.onClick handler
but it is called without () and why is the pancake so.. - paul_Hills47 commented on April 4th 20 at 13:28
@paul_Hills47, see. This is the moment of instantiation of the component Square. Property onClick you pass a function () => this.handleClick(i).

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

Here is a description of the component Square. You create component button, set the onClick which assigns the value of the property onClick of the component Square.

Square function(props) {
 return (
<button
className="square"
onClick={props.onClick}
>
{props.value}
</button>
);
}

If it was written onClick={props.onClick()}, the component property button would be assigned to the result of function execution () => this.handleClick(i).

When the button is pressed, then call the function assigned to the property onClick of a component button, this function was transferred to the component Square in the property onClick. This is a different, unrelated properties. The second can be renamed, calling it the way you want. - dessie_Buckrid commented on April 4th 20 at 13:31
@dessie_Buckrid, I realized
but the question is why are there brackets?
the <script>
 countRabbits function() {
 for(let i=1; i<=3; i++) {
 alert("Rabbit number is" + i);
}
}
</script>

<input type="button" onclick="countRabbits()" value="Count rabbits!">



where exactly is the function call if you do not write the brackets? - paul_Hills47 commented on April 4th 20 at 13:34
@paul_Hills47because it's plain HTML. In the tag input attribute onclick it is necessary to assign the JS code that should be executed. Different technologies, it is not surprising that the rules of use is also a little different. - dessie_Buckrid commented on April 4th 20 at 13:37
@dessie_Buckrid, just to summarize
if you write in vanilla with skachkami?
if you write in reacte without brackets? - paul_Hills47 commented on April 4th 20 at 13:40
@paul_Hills47, it's rude, but true =) - dessie_Buckrid commented on April 4th 20 at 13:43

Find more questions by tags JavaScriptReact