Question 187701 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – The onClick event is fired as soon as I compile the code rather than waiting for the onClick event in next.js

I just started learning Next.js and wanted to try something straightforward. I wanted to display a button on my page that when clicked would show "clicked" in the console.

this is the code that I added to page.js in the default template that is generated when you run npx create-next-app.

export default function Home() {
    function handleClick() {
        console.log('clicked');
    }
    return (
        <div>
            <button onClick={handleClick()} >Click me</button>
        </div>
    )
}

When this is run it is firing the onClick without even the event happening.

the fixes I have tried till now….

return (
        <div>
            <button onClick={() => handleClick} >Click me</button>
        </div>
)

this was throwing an error

error Error: Event handlers cannot be passed to Client Component props.
  <button onClick={function} children=...>
                  ^^^^^^^^^^
If you need interactivity, consider converting part of 
this to a Client Component.
   at stringify (<anonymous>)
digest: "1701345382"
null

I also tried

return (
            <div>
                <button onClick={(handleClick} >Click me</button>
            </div>
    )

It was also throwing the same error

Tags:

4

Answers


  1. 0

    What I have learned while doing some React is that: (correct me if I am wrong)

    I we are using arrow function to pass the onclick handler then you will have to call the handleClick function.

    Try changing it to:

    <button onClick={() => handleClick()}> Click me </button>

    (we need () after function here)

    This syntax is mostly used if we would want some parameters to be passed in handleClick function.

    Otherwise, we can also do it like this:

    <button onClick={handleClick}> Click me </button>

    (we don’t need () after function here)

    If we would have done:
    <button onClick={handleClick()}> Click me </button>

    Then the handleClick function would have been ran without our clicking the button as soon as this line of code is executed while everything is rendering on the page.

    As it happened with you!
    Hope it helps 😀

    Login or Signup to reply.
  2. 0

    Try using this

         const handleClick=()=>{
           console.log("clicked")
       }
    Login or Signup to reply.
  3. 0

    Next js renders the page on Server side by default. But event happens in browser. So at top of that nextjs file, mention ‘use client’ it converts the component into client side.

    'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>)}

    Refer Next js docs: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive

    Login or Signup to reply.
  4. 0

    Have you tried converting that component to a client component, with adding 'use client'; at the top of the file? Because all components in Next by default are server components, therefore for client side interactivity you need to use ‘use client’.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search