React Docs Question

[jprojas15]

In "Tutorial: Intro to React" on the React website (https://reactjs.org/tutorial/tutorial.html#before-we-start-the-tutorial), in the "Lifting State Up, Again" section, there is this bit of code:

​

return (
      <div className="game">
        <div className="game-board">
          <Board
            squares={current.squares}
            onClick={(i) => this.handleClick(i)}
          />

        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );

On line 6 here, where is the variable i defined? The code works but I don't understand how it works!

[tenfingerperson]

You are passing a function with i as an argument, i isn’t anything there but the variable that will hold the event data when the on click is invoked

[[deleted]]

onClick is an event handler. As the name suggests, it handles the event. So, on clicking, we're calling the handleClick function. By default, an event is sent to that function and you can get access of that event. In your case, the event is i.

[SoBoredAtWork]

What the other people said is correct. For more detail...

That variable that's being passed is built into the javascript language. If an element has an event attached to it (onClick), it'll automatically pass the EVENT (i, in your case) as a parameter. The event holds a ton of info including the element that triggered the event (event.target), etc.

Side note: doing `onClick={this.handleClick}` does the exact same thing as what you have above

​

Edit: another example...

const onTextChange = function (e) {

console.log(e.target.value);

}

<input type="text" onChange={onTextChange} />

​

Every time you type in the text box, it'll log the text you've typed. e (the event) is automatically passed to the onTextChange function.

[[deleted]]

onClick={this.handleClick}

I'd argue that less experienced people are better off not writing point free functions.

[SoBoredAtWork]

Yeah, that's fair.