Understanding passing function as props in Tic Tac Toe example React

1
votes

In am a beginner in React. In the Tic Tac Toe Tutorial on the official React website, there are 3 Components:

  1. Square
  2. Board (consisting of 3x3 Square Components)
  3. Game (parent of Board)

The idea is that whenever a square Component is clicked the clicked event will pass up to the Board and further up to the Game Component. The Game Component will handle this onClick event.

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

handleClick(i) is a function inside Board Component.

Board Component

<Square onClick={() => this.props.onClick(i)}/>

Square Component

<button className="square" onClick={props.onClick}></button>

The above code snippet is from index.js at: CodePen

What I could not understand is what does:

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

mean?

What does i mean here ? Where does it come from ? If we remove i then why does not the function work ?

4
reactjs
I rather they wrote it as e for event, it is confusing as i. – P Fuster
@PFuster In fact as Board component has no native onClick handler, i don't think e is referring to an event. If you follow the call chain i is probably an integer referring to the square's index. – nubinub
Oh my bad that is true. In this case it's their custom component prop! – P Fuster

4 Answers

3
votes

It's a parameter of an arrow function. Arrow functions are a simplified way of writing a function, where parenthesis are sometimes optional.

The first parameter of the onClick property is usually the event itself. So it's just passing the event to handleClick.

1
votes

i => this.handleClick(i) is an arrow function declaration. It is quite similar as the boundFunction declaration below :

function myFunction(i) {
  this.handleClick(i);
}
const boundFunction = myFunction.bind(this);

onClick={i => this.handleClick(i)} is the way to pass a property to a component. This allows you to access the function within the Board Component via this.props.onClick and to execute that function via this.props.onClick(whatEverValueYouWant).

Edit

To see thing clearer, i am completing my answer with the call sequence there.

button.onClick(event) => Square.props.onClick() => Board.props.onClick(i) => Game.handleClick(i)

The click on the button triggers the onClick function defined on the button tag. This function is defined as this.props.onClick wich refers to the Square property onClick defined on the Square tag like follows : () => this.props.onClick(i), with i referring to the index of the Square. So this function is called with the native event which is not used. The function could have beend defined like that (event) => this.props.onClick(i). Since the event is not used there is no point declaring this attribute.

On the Square tag this.props.onClickrefers to the Board property onClick defined like that: (i) => this.handleClick(i). So one click on the button is triggering handleClick method defined in the Game component with an index i value defined somewhere in the Board component, probably within a loop rendering all the Squares.

0
votes

i is the return value of his children (the return value of the onClick event of Square).

0
votes

As in the code the Board component has a props of type function which is called when its div gets clicked

   onClick={() => this.props.onClick(i)}

So on its parent the props is injected with a function that accept first parameter as the index of board. In this case they use an arrow function to define that function props.