Learn the basics of React's onClick event handler, including event listening, onClick buttons, synthetic events, custom events, and more.

LogRocket is a frontend monitoring platform that helps developers debug and troubleshoot issues in web applications by providing session replay, error tracking, and performance monitoring capabilities. With LogRocket, developers can gain insights into user interactions, identify bugs, and optimize application performance to deliver better user experiences. Developers can learn how to integrate LogRocket into their web applications, analyze user sessions, and diagnose frontend issues effectively.

LogRocket

Learn about the onClick event handler in React, its usage in HTML and JavaScript, and how to handle events in functional React components. Also, explore TypeScript's static typing for event handlers.

React onClick event handlers: A complete guide

Understanding onClick in HTML, JavaScript, and React

Over 200k developers use LogRocket to create better digital experiences

Handling common issues with onClick in React

Get set up with LogRocket's modern React error tracking in minutes:

This is excellent. Love that they also put TypeScript examples in there.
However, one thing I didn’t see in here is passing properties back from an on-click event as a passenger (i.e. curried event handlers):
<pre><code>const SocialNetworkButton = ({
 children,
 network,
}: {
 children: React.ReactNode;
 network: string;
}) =&gt; {
 const handleClickEvent = (network: string) =&gt; (e: React.MouseEvent&lt;HTMLButtonElement&gt;) =&gt; {
 console.log(&quot;The click event&quot;, e);
 console.log(&quot;The network&quot;, network);
 };

 return &lt;button onClick={handleClickEvent(network)}&gt;{children}&lt;/button&gt;;
};
</code></pre>
Usage:
<pre><code>&lt;SocialNetworkButton network=&quot;facebook&quot;&gt;Facebook&lt;/SocialNetworkButton&gt;

&lt;SocialNetworkButton network=&quot;x&quot;&gt;X (Twitter)&lt;/SocialNetworkButton&gt;

</code></pre>
Probably not the best example since this could be done more simply, but it demonstrates the method.