Defining Event Handlers as Functions

Snippet

Defining Event Handlers as Functions

In React, you pass a function as the event handler rather than a string. This keeps your logic organized and reusable.

snippet.js
javascript
function ActionButton() {
  function handleClick() {
    alert('Button was clicked!');
  }
 
  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}

react

Breakdown

function handleClick() { ... }

Defines a local function that contains the logic to run when the event occurs.

onClick={handleClick}

Assigns the function to the 'onClick' event. Note that we don't use parentheses here (no 'handleClick()').

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Defining Event Handlers as Functions

Related