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>
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)}/>
}
}
<ul> {this.state.letters.map(letter => <li key={letter} onClick={() => this.handleClick(letter)}> {letter} </li> )} </ul> 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.
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.
(event) => this.doSomething(event, additionalArguments). But if yourdoSomethingdoesn't care, you can of course omit it.