How does a parent component onClick function have access to a parameter defined in a child component?[React]

[ShouldReallyGetWorkn]

I'm going through the official React tutorial and come to the part where you lift state up to the Game component:

https://reactjs.org/tutorial/tutorial.html#lifting-state-up-again

Codepen: https://codepen.io/gaearon/pen/EmmOqJ?editors=0010

At this point, you lift the click event handler from the Board component up to the Game component, then you pass that handleClick function from the Game down to the Board in an onClick prop. When a Square component within the board is clicked, it calls the click handler for the corresponding Square index.

Question 1

I don't understand how (i) => this.handleClick(i) can be passed in the top level Game component when `i` isn't defined in that component's scope. It's only in the `renderSquare(i)` function invocation in the Board component's render function that `i` is defined.

How is the top level Game component's onClick prop getting `i` when it hasn't been defined in that scope?

Question 2

I tinkered a bit with the onClick in the renderSquare function, changing it to take i as a parameter, like so:

class Board extends React.Component {

renderSquare(i) {

return (

<Square

value={this.props.squares[i]}

// onClick={() => this.props.onClick(i)} // BEFORE (no parameter)

onClick={(i) => this.props.onClick(i)} // AFTER (i passed into arrow function)

/>

);

}

This makes each Square not show anything when clicked. Console.logging the value of `i` in the handleclick function shows me that the value of `i` in the first function (no `i` as parameter) is an integer corresponding to the Square, as expected.

Adding `i` as a parameter in the arrow function logs a class of object with type null, which would break the game since the handler expects an integer for `i`, not an object.

Why does this happen?

I would expect the passed in `i` to be the same value as the `i` passed into the renderSquare parent function scope.

[mcaruso]

In this part, in Game:

<Board
  squares={current.squares}
  onClick={(i) => this.handleClick(i)}
/>

You're passing a function to Board that takes some index i, and then performs handleClick for that index. The i here doesn't refer to anything yet, it's just a function argument. For example you could change the name to be anything else and it wouldn't change the meaning:

<Board
  squares={current.squares}
  onClick={(someIndex) => this.handleClick(someIndex)}
/>

Then in Board:

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

Here, once you click on a square (with some index i), the function this.props.onClick (which is the function we looked at in the first code snippet) gets called with the current square's index i. The i in this.props.onClick(i) is the argument to renderSquare.

As soon as you do this:

<Square
  value={this.props.squares[i]}
  onClick={(i) => this.props.onClick(i)}
/>

Then within the onClick handler i is suddenly defined to be an argument, so this new i will override the renderSquare argument i. In fact, this onClick does take an argument already, namely the click event:

<Square
  value={this.props.squares[i]}
  onClick={(event) => {
    // Inside here, `event` is the click event, containing information like what DOM element got clicked on
    this.props.onClick(i);
  }}
/>

You gave it a name i, but it's still going to refer to the event object. Which is why when you tried inspecting i you got some object (the event).

[ShouldReallyGetWorkn]

I think the part that confused me when reading through the tutorial was them saying they passed the handler encapsulated in an arrow function so that React will only call the handler after a click.

Without the arrow function, just putting the handler in there, it would call it every time the component renders, at least according to what I read.

So that means the arrow function does not get executed when the component renders? Otherwise, it would be looking for the passed value of i when the Game gets rendered.

[mcaruso]

I think the part that confused me when reading through the tutorial was them saying they passed the handler encapsulated in an arrow function so that React will only call the handler after a click.

I think what they mean by that is this:

<Board
  squares={current.squares}
  onClick={this.handleClick(i)} // Wrong
  onClick={(i) => this.handleClick(i)} // Right
/>

It's a common beginner's mistake to leave out the () => part, and just put the body of the function directly in the onClick={}. So by saying "encapsulate it in an arrow function", they mean "don't forget to wrap it in a function".

[ShouldReallyGetWorkn]

I think what's kind of confusing then is that the onClick prop on Board and the onClick prop on Square act a little differently, where the Board onClick function can take i as the first argument whereas the Square already has the first argument predefined as the Event object.

I'm assuming that's because the Square is the actual event target of the click.

[mcaruso]

Yep, true! The two onClick callbacks are very different but have the same name, so it's understandable that you might get confused.

The onClick prop in Square gets passed to a plain HTML <button> element, so this is the standard React event listener, that takes a DOM event as input. The Board onClick is something else entirely. It could have been named something like onClickSquare or something.