onClick is not working
Unanswered
Tiphiid wasp posted this in #help-forum
Tiphiid waspOP
i m using updated node version, also using "use client"
unable to figure out where it is going wrong
onClick as above are logged on rendering and not on click, but i m seeing these logs in terminal
unable to figure out where it is going wrong
<div className="flex">
<Image
src="/assets/images/logo.svg"
width={37}
height={37}
className="rounded-full hover:bg-sky-900"
alt="logo"
onClick={handleToggle}
/>
{toggleDropdown && (
<div className="dropdown">
<Link
href="/profile"
className="dropdown_link"
onClick={() => setToggleDropdown(false)}
>
My Profile
</Link>
<Link
href="/create-prompt"
className="dropdown_link"
onClick={() => setToggleDropdown(false)}
>
Create Prompt
</Link>
<button
type="button"
onClick={() => {
setToggleDropdown(false);
signOut();
}}
className="mt-5 w-full black_btn"
>
Sign Out
</button>
</div>
)}
</div> <Link
href="/profile"
className="dropdown_link"
onClick={console.log("1")}
>
My Profile
</Link>onClick as above are logged on rendering and not on click, but i m seeing these logs in terminal
32 Replies
@!=tgt do
tsx
onClick={()=>{console.log("1")}}
and when you click the button it should log to console
Tiphiid waspOP
not working
i tried that earlier
I dont know then
@!=tgt weird
Tiphiid waspOP
do u know any other community where i can get a solution
@Tiphiid wasp i m using updated node version, also using "use client"
unable to figure out where it is going wrong
<div className="flex">
<Image
src="/assets/images/logo.svg"
width={37}
height={37}
className="rounded-full hover:bg-sky-900"
alt="logo"
onClick={handleToggle}
/>
{toggleDropdown && (
<div className="dropdown">
<Link
href="/profile"
className="dropdown_link"
onClick={() => setToggleDropdown(false)}
>
My Profile
</Link>
<Link
href="/create-prompt"
className="dropdown_link"
onClick={() => setToggleDropdown(false)}
>
Create Prompt
</Link>
<button
type="button"
onClick={() => {
setToggleDropdown(false);
signOut();
}}
className="mt-5 w-full black_btn"
>
Sign Out
</button>
</div>
)}
</div>
<Link
href="/profile"
className="dropdown_link"
onClick={console.log("1")}
>
My Profile
</Link>
onClick as above are logged on rendering and not on click, but i m seeing these logs in terminal
Irish Setter
You're putting the onClick on the Link component, are you preventing default? Since it will redirect you to a new page with that thus not executing your onClick function @Tiphiid wasp
Irish Setter
your syntax seems correct so the problem might be in the handleToggle function, is it getting called when you click it? Verify with console.log and check on browser's terminal
Tiphiid waspOP
const handleToggle = () => {
console.log('sss')
}
console.log('sss')
}
this was handletoggle
and i m unable to see anything on browser
Irish Setter
that's hella weird then lol
Tiphiid waspOP
yup too much
Can you provide a minimal reproduction?
@Nelson Can you provide a minimal reproduction?
Tiphiid waspOP
which part of code you want
I mean, can you provide a minimal reproduction so that we can debug it more easily?
Tiphiid waspOP
@Nelson I mean, can you provide a minimal reproduction so that we can debug it more easily?
Tiphiid waspOP
complete code is in this
@Nelson I mean, can you provide a minimal reproduction so that we can debug it more easily?
Tiphiid waspOP
and also if i use html tag in layout.jsx it is giving error, if it happens to you just make it a empty tag
Tiphiid waspOP
what the heckkkk
@Nelson Click to see attachment
Tiphiid waspOP
my console
What did you do that caused this error?
Tiphiid waspOP
nothing
it is the same code which you are running on your system
The only errors showed are because haven't set up next-auth.
@Nelson Click to see attachment
Tiphiid waspOP
dm?
