Error: Event handlers cannot be passed to Client Component props

What causes this error

Server Components render once, on the server, and produce static output — they have no concept of a live JavaScript function that could run in response to a browser event. Any interactivity has to live entirely inside a 'use client' component, including the event handler itself.

The Fix

// Wrong — Server Component trying to pass a handler down
// page.tsx (Server Component)
export default function Page() {
  function handleClick() { console.log('clicked'); }
  return <Button onClick={handleClick} />; // error
}

// Fix — move the interactive piece into its own Client Component
// Button.tsx
'use client';
export function Button() {
  return <button onClick={() => console.log('clicked')}>Click</button>;
}

// page.tsx (Server Component) — just renders it, no handler passed down
import { Button } from './Button';
export default function Page() {
  return <Button />;
}

Common causes / variations

• Copy-pasting a component that used to be a Client Component into a Server Component without adjusting for the boundary
• Trying to pass a server-side function (e.g. one that queries the database) directly as an onClick instead of using a Server Action
• Not realizing a parent layout is a Server Component, so anything it renders inherits that constraint unless explicitly marked 'use client'

Related errors

See also: Only plain objects can be passed to Client Components, useState/useEffect only works in Client Components.