1

For example, in a rendering REACT component, if I needed to pass in an argument it would look like this:

<button onClick={() => this.doSomething(**passed in parameter**)}>Press me!</button>

This works fine. But how come you don't have to clarify it as the parameter in the fat arrow function first? Like this:

<button onClick={(**PARAMETER PASSED IN HERE FIRST**) => this.doSomething(**SAME PARAMETER PLACED HERE**)}>Press me!</button>
BrianisWinston
  • 26
  • 4

1 Answers1

1

Refer to Scope:

// (a,b) are parameters passed by `Component` to `onClick` handler.
<Component onClick={(a,b) => this.doSomething(d)}/>

// Simple class example
class App extends React.Component {

  doSomething = (a,b) => {
    console.log('a',a,'b',b);
  }

  render() {
//                    onClick={this.doSomething}
    return <Component onClick={(a,b) => this.doSomething(a,b)}/>
  }
}

class Component extends React.Component {

  coolClick = () => {
    this.props.doSomething('hello','world')
  }

  render() {
    return <button onClick={this.coolClick}>Active doSomething</button>
  }
}


// d is a parameter available in the current scope
<Component onClick={() => this.doSomething(d)}

// Simple examples of possible scopes
import { d } from './consts'

const d = 5;

class App extends React.Component {

  doSomething = (x) => {
    console.log('x',x);
  }

  render() {
    const d = 5;
    return <Component onClick={() => this.doSomething(d)}/>
  }
}
Dennis Vash
  • 50,196
  • 9
  • 100
  • 118
  • Thanks for this! But for more clarification, in this example: `
      {this.state.letters.map(letter =>
    • this.handleClick(letter)}> {letter}
      • )}
    ` Shouldn't you be able to pass in the "letter" parameter as an argument in the arrow function, and this.handleClick should know what it is because it was passed in? B/c my confusion is, the function inside the fat arrow should need to know what variable it is using by what was passed in from the actual arrow function parameter.     – BrianisWinston Sep 19 '19 at 20:37
  • 1
    @BrianisWinston I don't get what your confusion is, which of the two arrow functions in your snippet you are talking about, and whether it is working as expected for you or not. – Bergi Sep 19 '19 at 20:55
  • @Bergi I'm referring to the onClick function. Because there is a variable "letter" coming from the map function on the outside, it seems like you would have to pass in "letter" as a parameter in the onClick fat arrow function in order for this.handleClick(letter) to be able to use it. Although the documentation clearly says you don't need to pass in a parameter, I would just like clarification for myself. – BrianisWinston Sep 21 '19 at 01:05
  • @BrianisWinston No. As you said, it's coming from outside (through [closure](https://stackoverflow.com/q/111102/1048572)), it is *not* coming from a parameter of `onClick`. This means that `onClick()` can be called with no arguments (and it uses the `letter` from the `map` callback parameter) - if you had declared it as a parameter, then the caller of `onClick(…)` would need to provide the value, and that's not what we want here. – Bergi Sep 21 '19 at 11:13