onClick not firing

[phidah]

I have a standard page with a link that I want to use to toggle the showing of another component:

import React from 'react'

export default class Page extends React.Component {
  render(props) {
    <a onClick={() => console.log("wow")}>Click here</a>
  }
}

When clicking the link nothing happens in the console. I've tried various ways of doing this.

I tried doing it in a page directly, in a subcomponent, etc but it doesn't work at all. If I console.log in the contructor it gets displayed in the server logs.

What do I have to do to be able to make proper client side rendered React things in Next?

[jamesmosier]

That worked for me, although you have a syntax error with your render method:

import React from 'react'

export default class Page extends React.Component {
  render() {
    return <a onClick={() => console.log("wow")}>Click here</a>
  }
}

Do you have any other code you could share?

[abubakar2029]

"use client"
import React from 'react'
const page = () => {
function myFun(){
console.log('helo');
}
return (
<>

hey

hello ) } export default page Onclick is not working here?

[phidah]

Honestly don't know what was wrong. Taking your code directly did not work.
I took all the files from the project and copied to a new project and it worked.

[ifeora-emeka]

I'm having same issue as well <h4 className="title" onClick={() => alert('yo.!!')}> <a href='#c'>{data.title} </a> </h4>

[lojithv]

In my case, I had to rename the file name of the component in lowercase. After that, all click listeners worked. Ex: Footer.js (old file name) -> footer.js

[nikovacs]

I renamed my file NavBar.tsx -> navBar.tsx -> NavBar.tsx and it worked... lol

[LukNasc]

i'm having same issue in the component, when i try in the index.ts file on root of src/pages dir work but not in src/components/Component.ts

/src/components/Component.ts

this not work

src/pages/index.ts

this work

[GoncaloFig]

I have the same issue...

Do you know the solution?

[abubakar2029]

I'm not sure but I think it was solved by updating node version

[Lagyu]

I was having the same issue, finally found that I was mistakenly loading the server side env variable from client side with @t3-oss/env-nextjs.
Removing the mistake made the onClick work again.

[runoncedev]

Was having the same issue, found that it was because I was doing it in _document.js and it's only rendered on the server. Moved the button somewhere else and it started working:

This file is only rendered on the server, so event handlers like onClick cannot be used in _document.

[Adeen1]

love you brother. I was totally exhausted and could not find the solution to this problem but then I came across this comment after wasting 5 hours

[lunoxx]

I have a standard page with a link that I want to use to toggle the showing of another component:

import React from 'react'

export default class Page extends React.Component {
  render(props) {
    <a onClick={() => console.log("wow")}>Click here</a>
  }
}

When clicking the link nothing happens in the console. I've tried various ways of doing this.

I tried doing it in a page directly, in a subcomponent, etc but it doesn't work at all. If I console.log in the contructor it gets displayed in the server logs.

What do I have to do to be able to make proper client side rendered React things in Next?

It`s 2023 and problem is alive. Any chance to get solved closely ?

UPDATE:
I had node v16.3. I was too stupid to check this before.
If anyone else has this problem, UPDATE NODE.

[SunriseXuu]

I was using error handling pattern suggested by nextjs forms and mutations docs. However, the form action in the client side component didn't respond at all when I press the submit button, nor switching to onclick. Upgrading node to 18 worked for me, too. Thanks a lot I didn't spend too much time to get here.

[Mitchell-Conrad-20]

Same issue for me. It strikes me as odd that the issue does not occur purely in React, rather, only in NextJS. Upgrading to the latest version of NodeJS (node-v18.17.1-x64) solved the problem.

[nathan-osman]

The amount of frustration and hair-pulling that I've gone through... and all for a solution as simple as this. 😆

[wadinj]

Thanks 👍 I found your gem after 1 hour - upgrade to v18 works like a charm

[syond]

For me it was just because I was rendering the element at _document.jsx. I moved to _app.jsx, following the "Layout Pattern" section at the Nextjs documentation, and works fine.

[Shivansh-yadav13]

I forgot to add <html> <body> <main> in the layout.tsx
Adding them fixed the issue.

[CHENNI-Nidhaleddine]

Thanks it works for me

[iqrairfan100]

thanks so much

[xlebenny]

any hydration problem also can make entire(in anywhere) onclick doesn't work

I used 4 hours :(