Handling Click Events in Components

Snippet

Handling Click Events in Components

To make a component interactive in Next.js, you define a function to handle the event and pass it to the 'onClick' prop. The 'use client' directive is required for interactivity in the App Router.

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

nextjs

Breakdown

"use client";

Tells Next.js that this is a Client Component, allowing the use of event listeners.

onClick={handleClick}

Attaches the handleClick function to the button's click event.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Handling Click Events in Components

Related