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

About

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

Snippet

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

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

ReactDOM.render(
  <ActionLink />,
  document.getElementById('root')
);

<div id="root">
<!-- called the "root" DOM node because everything inside it will be managed by React DOM -->
</div>

Result: Click on the link to see the event in action

Rendered by WebCode