Error: Event handlers cannot be passed to Client Component props.

Next.js · updated 2026-11-03

Thrown while rendering a Server Component in the App Router, in development and production. The message shows the element and the prop, for example <button onClick={function}>, and the props that follow say where it was rendered.

 ⨯ Error: Event handlers cannot be passed to Client Component props.
  <button onClick={function onClick} children=...>
                  ^^^^^^^^^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
    at stringify (<anonymous>)
  digest: "2431875915"

Quick fix

Functions can't travel from the server to the browser. Put the interactive part (the button and its onClick) in its own file that starts with 'use client', and render that component from the Server Component. Pass it data, not functions.

Find the element and prop named in the message.
Move that element into a new component file that starts with 'use client'.
Keep the handler inside the Client Component; pass only serializable data (ids, strings, numbers) as props.
If the handler needs to run server code, make it a Server Action ('use server') and call it from the Client Component.

typescript

// app/orders/archive-button.tsx
'use client';
import { archiveOrder } from './actions'; // a 'use server' function

export function ArchiveButton({ orderId }: { orderId: string }) {
  return <button onClick={() => archiveOrder(orderId)}>Archive</button>;
}

// app/orders/page.tsx (Server Component): pass data, not a function
// <ArchiveButton orderId={order.id} />

Why it happens

onClick or onChange written directly in a Server Component

Files in the app directory are Server Components unless they start with 'use client'. A button with onClick in a page.tsx or layout.tsx hits this error the first time the page renders.

Passing a callback prop to a Client Component

Rendering <Dialog onClose={() => ...} /> from a Server Component tries to send a function to the browser. Only Server Actions can be passed as functions, because Next.js turns them into references.

A shared component that lost its directive

A component that worked inside a Client Component tree breaks when a Server Component imports it directly, because it never declared 'use client' itself.

Other fixes

Keep 'use client' boundaries small (a button, a form) so the rest of the page stays on the server.
Form submissions can often skip onClick entirely: <form action={serverAction}> works from a Server Component.

Same error, other wording

Error: Event handlers cannot be passed to Client Component props. <input onChange={function onChange} ...>
Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

Let your coding agent catch the next one

Runheed records this error in production with the stack trace, the breadcrumbs before it and the agent session that shipped the code, and serves it to Claude Code, Cursor or any MCP client. With it connected, you can ask:

> Find the 'Event handlers cannot be passed to Client Component props' errors, show me which component and prop each came from, and move the interactive part into a small 'use client' component.

Plans from $29/mo See what your agent reads See the setupCancel any time from the billing portal