How to create and handle an event in a React Functional Component?


This page shows you how to create and handle a React event in a React function component


function ActionLink() {
  function handleClick(e) {
    console.log('The link was clicked.');

  return (
    <a href="#" onClick={handleClick}>
      Click me

  <ActionLink />,
<div id="root">
<!-- called the "root" DOM node because everything inside it will be managed by React DOM -->
  • Result: Click on the link to see the event in action

Discover More
React - Event

This page is DOM event handling in React. The React event e is a synthetic event defined according to the TR/DOM-Level-3-Events/W3C spec (no worry ...

Share this page:
Follow us:
Task Runner