What happens if we pass the function with parentheses?


#1

Question

In the context of this exercise, what happens if we pass the function with parentheses?

Answer

Say that you passed in a function with parentheses after the function name as a prop, like the following,

render() {
  return <Button press={this.press()}/>
}

This will call the press() function, and then the value passed as the prop will actually be the return value of the function rather than the function itself. By default, functions return undefined. As a result, when passing a function as a prop, there must not be any parentheses following its name.

The correct way to pass the function to the component would be,

render() {
  return <Button press={this.press}/>
}

FAQ: this.props - Pass an Event Handler as a prop