-
Couldn't load subscription status.
- Fork 7.8k
Description
Summary
Description
The below code example on the page https://react.dev/learn/adding-interactivity is deployed correctly when I build the project using vite. However, when I try to deploy the same code in a nextjs project, I get error "Event handlers cannot be passed to Client Component props."
export default function App() { return ( <Toolbar onPlayMovie={() => alert('Playing!')} onUploadImage={() => alert('Uploading!')} /> ); } function Toolbar({ onPlayMovie, onUploadImage }) { return ( <div> <Button onClick={onPlayMovie}> Play Movie </Button> <Button onClick={onUploadImage}> Upload Image </Button> </div> ); } function Button({ onClick, children }) { return ( <button onClick={onClick}> {children} </button> ); }
Please note that I am new to React and am using the articles on this website to learn React. So there could be areas where I may be wrong and I apologize for any inconvenience caused due to my ignorance of certain concepts.
I used NextJS first as it was the recommended framework. Only after the code did not deploy, I tried the same code in a new project but this time I used vite.
The error I see is in the browser as below
Runtime ErrorServer
Event handlers cannot be passed to Client Component props.
<button onClick={function onPlayMovie} children=...>
^^^^^^^^^^^^^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
src/app/App.js (3:5) @ App
1 | export default fun```
Below is the trace from the command line
⨯ Error: Event handlers cannot be passed to Client Component props.
<button onClick={function onPlayMovie} children=...>
^^^^^^^^^^^^^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
at stringify (<anonymous>)
at stringify (<anonymous>)
at stringify (<anonymous>) {
digest: '1272121264'
}
⨯ Error: Event handlers cannot be passed to Client Component props.
<button onClick={function onUploadImage} children=...>
^^^^^^^^^^^^^^^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
at stringify (<anonymous>)
at stringify (<anonymous>)
at stringify (<anonymous>) {
digest: '628795184'
}
GET / 500 in 25260ms
Page
https://react.dev/learn/adding-interactivity
Details
Below are the details of my environment from the package.json
"dependencies": { "react": "19.1.0", "react-dom": "19.1.0", "next": "15.5.5" }