I have a website setup with the App Router, and the current issue is in the file app/performers/page.tsx. I was having issues where the onClick event wasn't firing on a element, so created a simple to troubleshoot. I have "use client" at the top of the file, to make it a client component. The relevant code is: console.log("hi")}>hi When I click the button, nothing happens. Any ideas?

onClick attribute doesn't trigger

Unanswered

Blue swimming crab posted this in #help-forum

Blue swimming crabOP

2023-08-20T18:22:56.000Z

I have a website setup with the App Router, and the current issue is in the file app/performers/page.tsx. I was having issues where the onClick event wasn't firing on a <p> element, so created a simple <button> to troubleshoot. I have "use client" at the top of the file, to make it a client component. The relevant code is:

<button style={{background: "red"}} onClick={()=>console.log("hi")}>hi</button>

When I click the button, nothing happens. Any ideas?

7 Replies

European sprat

2023-08-20T18:37:07.000Z

Show the full code of the button component and the server component page

Blue swimming crabOP

2023-08-20T18:37:33.000Z

the entire page.tsx file?

(the button is at the very bottom)

European sprat

2023-08-21T05:23:15.000Z

@Blue swimming crab i finally got around to trying this. i removed the PerformerPopup and AiOutline... imports and deleting the line for AiOutline... icon and then tried it and the button logs for me just fine

i also noticed you have an onClick on a div which is invalid

Mini Lop

2023-08-27T11:53:10.000Z

@European sprat could you explain please why onClick on a div is invalid? Does onClick work on div?