What would be the common mistake of function being called every time the component renders?
You need to make sure that function is not being called while passing the function as a parameter.
1 2 3 4 | render() { // Wrong: handleClick is called instead of passed as a reference! return <button onClick={this.handleClick()}>{'Click Me'}</button> } |
Instead, pass the function itself without parenthesis:
1 2 3 4 | render() { // Correct: handleClick is passed as a reference! return <button onClick={this.handleClick}>{'Click Me'}</button> } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
