Why the ```onClick``` JSX event is triggered twice in React without an arrow function?

Asked Sep 05 '20 at 23:37

Active Sep 05 '20 at 23:37

Viewed 101 times

When I want to trigger something with the onClick JSX event.

With the arrow function the event is triggered once

<button onClick={() => console.log("This button was clicked")}>Click Me!</button>

But without the arrow function the event is triggered twice

<button onClick={console.log("This button was clicked")}>Click Me!</button>

Can someone explain why this happens?

asked Sep 05 '20 at 23:37

Jose Maselli

3

You're running the function in the render call. You are not passing the function to onClick. – JMadelaine Sep 05 '20 at 23:43
The duplicate question is old but the reason and hence the explanation, answers are still the same. – devserkan Sep 06 '20 at 00:06
the proper way is to use the arrow function – alilland Sep 06 '20 at 04:32

0 Answers0