In the example <Button onClick={this.handleClick} />, what is assigned to the onClick prop?

In the example <Button onClick={this.handleClick} />, what is assigned to the onClick prop?

• A. this.handleClick
• B. this.state.handleClick
• C. onClick={this.handleClick}
• D. this.props.onClick

Answer: (A)

The onClick prop is receiving a function reference. In this example, this.handleClick is a method on the component instance, and by writing it inside braces we’re passing that function itself as the value of onClick. That means the Button will call this.handleClick when it’s clicked. Important nuance: using parentheses would call the function right away during render and assign the function’s return value to onClick, which isn’t what you want. And this handleClick isn’t coming from state or props in this case; it’s the component’s own method that you’re wiring up as the handler. If you need to ensure the right this context inside handleClick, bind it in the constructor or use an arrow function for the method.

The onClick prop is receiving a function reference. In this example, this.handleClick is a method on the component instance, and by writing it inside braces we’re passing that function itself as the value of onClick. That means the Button will call this.handleClick when it’s clicked.

Important nuance: using parentheses would call the function right away during render and assign the function’s return value to onClick, which isn’t what you want. And this handleClick isn’t coming from state or props in this case; it’s the component’s own method that you’re wiring up as the handler. If you need to ensure the right this context inside handleClick, bind it in the constructor or use an arrow function for the method.