Error in Next.js tutorial with event handlers in server components.
5 replies
Last updated: Feb 28, 2024
S
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
T
add "use client" to the top of your file
Feb 27, 2024, 9:21 PM
S
import { useClient } from 'react';^ Like this?
Feb 27, 2024, 9:26 PM
T
Feb 27, 2024, 9:27 PM
☝️ yep! You can’t have event handlers in server components, since events happen in the client.
the tinder-blockchain tutorialThe tutorial may simply be cursed. /s
Feb 27, 2024, 9:28 PM
S
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.