onClick is not working

<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>

@!=tgt Send an example

Tiphiid waspOP

2024-02-10T14:51:25.000Z

In image tag u can consider as a example

@Tiphiid wasp <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>

!=tgt

2024-02-10T14:51:55.000Z

any console logs?
Also what does handleToggle do?
What's the function

Tiphiid waspOP

2024-02-10T14:52:14.000Z

I was actually logging there

even that is not working

!=tgt

2024-02-10T14:52:26.000Z

 <Image
   src="/assets/images/logo.svg"
   width={37}
   height={37}
   className="rounded-full hover:bg-sky-900"
   alt="logo"
   onClick={handleToggle}
 />

this is the correct way

since it's a named function

@!=tgt tsx <Image src="/assets/images/logo.svg" width={37} height={37} className="rounded-full hover:bg-sky-900" alt="logo" onClick={handleToggle} /> this is the correct way

Tiphiid waspOP

2024-02-10T14:53:04.000Z

yup even tried that earlier

@Tiphiid wasp yup even tried that earlier

!=tgt

2024-02-10T14:53:33.000Z

any console logs?

@!=tgt any console logs?

Tiphiid waspOP

2024-02-10T14:53:42.000Z

no nothing

!=tgt

2024-02-10T14:53:51.000Z

what does HandleToggle do?

send the function for that

Tiphiid waspOP

2024-02-10T14:55:50.000Z

nothing dude, it has a simple log which is not working

const handleToggle = () => {
console.log('sss')
}

@Tiphiid wasp const handleToggle = () => { console.log('sss') }

!=tgt

2024-02-10T14:57:37.000Z

weird af

@!=tgt hm

Tiphiid waspOP

2024-02-10T14:57:38.000Z

i m also getting a error when i use body tag inside layout.tsx

@Tiphiid wasp i m also getting a error when i use body tag inside layout.tsx

!=tgt

2024-02-10T14:57:45.000Z

What is it?

@Tiphiid wasp const handleToggle = () => { console.log('sss') }

!=tgt

2024-02-10T14:58:47.000Z

try doing this

 <Image
   src="/assets/images/logo.svg"
   width={37}
   height={37}
   className="rounded-full hover:bg-sky-900"
   alt="logo"
   onClick={()=>handleToggle()}
 />

@!=tgt What is it?

Tiphiid waspOP

2024-02-10T14:58:59.000Z

Application error: a client-side exception has occurred (see the browser console for more information).

@Tiphiid wasp Application error: a client-side exception has occurred (see the browser console for more information).

!=tgt

2024-02-10T14:59:23.000Z

and what's in the browser console?

@!=tgt and what's in the browser console?

Tiphiid waspOP

2024-02-10T14:59:36.000Z

!=tgt

2024-02-10T14:59:42.000Z

also try deleting the /.next folder

@Tiphiid wasp Click to see attachment

!=tgt

2024-02-10T14:59:51.000Z

try expanding the error

there should be an error telling you where the problem is

Tiphiid waspOP

2024-02-10T15:01:35.000Z

@Tiphiid wasp Click to see attachment

Tiphiid waspOP

2024-02-10T15:02:13.000Z

while using body tag in layout.tsx

@Tiphiid wasp while using body tag in layout.tsx

!=tgt

2024-02-10T15:02:23.000Z

what's your layout.tsx

Tiphiid waspOP

2024-02-10T15:02:42.000Z

// "use client";
import Nav from "@components/Nav";
import "@styles/globals.css";
export const metadata = {
  title: "Promptverse",
  description: "Discover AI prompts",
};

const MainLayout = ({ children }) => {
  return (
    <html lang="en">
      <body>
        <div className="main">
          <div className="gradient" />
        </div>

        <main className="app">
          <Nav />
          {children}
        </main>
      </body>
    </html>
  );
};

export default MainLayout;

@Tiphiid wasp // "use client"; import Nav from "@components/Nav"; import "@styles/globals.css"; export const metadata = { title: "Promptverse", description: "Discover AI prompts", }; const MainLayout = ({ children }) => { return ( <html lang="en"> <body> <div className="main"> <div className="gradient" /> </div> <main className="app"> <Nav /> {children} </main> </body> </html> ); }; export default MainLayout;

!=tgt

2024-02-10T15:03:23.000Z

I think I see why

Tiphiid waspOP

2024-02-10T15:03:32.000Z

what is it

!=tgt

2024-02-10T15:03:39.000Z

Why do you have an empty div

and a <main> tag

<main> should be in page.tsx

@!=tgt `<main>` should be in page.tsx

Tiphiid waspOP

2024-02-10T15:06:25.000Z

actually i m learning nextjs
and i was following a yt tutorial, he did use it in layout.tsx

!=tgt

2024-02-10T15:06:50.000Z

Nuke the empty div

@!=tgt Why do you have an empty div

Tiphiid waspOP

2024-02-10T15:06:59.000Z

that is empty just make it has a divider

!=tgt

2024-02-10T15:07:02.000Z

and move <main> to an indivitual page

@Tiphiid wasp that is empty just make it has a divider

!=tgt

2024-02-10T15:07:07.000Z

oh frick nah

dont become this guy

@!=tgt dont become this guy

Tiphiid waspOP

2024-02-10T15:08:27.000Z

lol

@Tiphiid wasp that is empty just make it has a divider

!=tgt

2024-02-10T15:08:32.000Z

yeah that's shit coding practive

remove it

// "use client";
import Nav from "@components/Nav";
import "@styles/globals.css";
export const metadata = {
  title: "Promptverse",
  description: "Discover AI prompts",
};

const MainLayout = ({ children }) => {
  return (
    <html lang="en">
      <body>
          <Nav />
          {children}
      </body>
    </html>
  );
};

export default MainLayout;

use this as your layout

@!=tgt tsx // "use client"; import Nav from "@components/Nav"; import "@styles/globals.css"; export const metadata = { title: "Promptverse", description: "Discover AI prompts", }; const MainLayout = ({ children }) => { return ( <html lang="en"> <body> <Nav /> {children} </body> </html> ); }; export default MainLayout; use this as your layout

Tiphiid waspOP

2024-02-10T15:13:49.000Z

Nope even this is not working

@Tiphiid wasp Nope even this is not working

!=tgt

2024-02-10T15:14:16.000Z

try moving Nav to each page

@!=tgt try moving `Nav` to each page

!=tgt

2024-02-10T15:19:51.000Z

@Tiphiid wasp

@!=tgt <@708500737272840203>

Tiphiid waspOP

2024-02-10T15:20:11.000Z

nope it didn't work

I know i m doing something wrong, but unable to figure out

@Tiphiid wasp nope it didn't work

!=tgt

2024-02-10T15:20:32.000Z

thats weird

hold up

try renaming MainLayout to RootLayout

@!=tgt thats weird

Tiphiid waspOP

2024-02-10T15:24:02.000Z

the weird thing is, if i remove body tag everything is working fine except onClick

@!=tgt try renaming `MainLayout` to `RootLayout`

Tiphiid waspOP

2024-02-10T15:24:24.000Z

does it matter?

@Tiphiid wasp does it matter?

!=tgt

2024-02-10T15:24:28.000Z

try

this is a working layout (not gonna work for you since no providers component)

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html suppressHydrationWarning lang="en">
      <body
        className={`${GeistSans.variable} ${GeistMono.variable} bg-base selection:bg-surface2/60 overflow-scroll`}
      >
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

@!=tgt try

Tiphiid waspOP

2024-02-10T15:27:22.000Z

didn't work though

@Tiphiid wasp didn't work though

!=tgt

2024-02-10T15:27:37.000Z

remove the providers component

and the css classes

@!=tgt remove the providers component

Tiphiid waspOP

2024-02-10T15:27:55.000Z

yup yup i m not using them

!=tgt

2024-02-10T15:28:04.000Z

idk then