Handling Click Events

Snippet

Handling Click Events

Event handlers allow your application to respond to user interactions. In React, you pass a function to the onClick prop to trigger logic when a button is pressed.

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

react

Breakdown

function handleClick() { ... }

Defines the custom logic that should run when the event occurs.

onClick={handleClick}

Attaches the handler function to the button's click event. Note that we pass the function name without parentheses.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Handling Click Events

Related