Unlock seamless workflows and faster delivery with our latest releases- get the details

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}>


<Image

src={

'<https://pbs.twimg.com/media/GHQMz5bXUAAmTkd?format=jpg&name=4096x4096>'

}

alt='moralis'

height={20}

width={20}

/>


<span className={style.accountAddress}>

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

</span>

</div>


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

Logout

</button>

</>

) : (

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

Login

</button>

)

}
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?