Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

Error in Next.js tutorial with event handlers in server components.

5 replies
Last updated: Feb 28, 2024
Following the tinder-blockchain tutorial and I’m new to JS, let lone Next.jsI’m getting this error, even though I followed the tutorial with creating a button.

Unhandled Runtime Error
Error: Event handlers cannot be passed to Client Component props.
  <button className=... onClick={function} children=...>
If you need interactivity, consider converting part of this to a Client Component.

{currentAccount ? (


<div className={style.currentAccount}>









<span className={style.accountAddress}>

{currentAccount.slice(0, 6)}...{currentAccount.slice(39)}



<button className={style.authButton} onClick={() => disconnectWallet()}>




) : (

<button className={style.authButton} onClick={() => connectWallet()}>




Feb 27, 2024, 9:15 PM
add "use client" to the top of your file
Feb 27, 2024, 9:21 PM
import { useClient } from 'react';

^ Like this?
Feb 27, 2024, 9:26 PM
☝️ yep! You can’t have event handlers in server components, since events happen in the client.

the tinder-blockchain tutorial
The tutorial may simply be cursed. /s
Feb 27, 2024, 9:28 PM
It’s always good to read the documentation. Got the client side to work! Thank you
Feb 28, 2024, 2:07 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?