I'm getting an error even though I'm using 'use client'.
Answered
MeKa posted this in #help-forum
MeKaOP
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.
other client page code is bellow
<button onClick={function} children=...>
^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
import React from 'react'
import { redirect } from 'next/navigation'
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/lib/auth";
import LoginWidget from './LoginWidget'
import { useLocale, NextIntlClientProvider } from 'next-intl';
const LoginPage = async () => {
const session = await getServerSession(authOptions)
const locale = useLocale();
let messages = (await import(`@/dictionaries/${locale}.json`)).default;
if (session) {
redirect('/')
}
return (
<NextIntlClientProvider
locale={locale}
messages={messages}
>
<LoginWidget />
</NextIntlClientProvider>
)
}
export default LoginPage;other client page code is bellow
77 Replies
MeKaOP
MeKaOP
There are no errors before the user logs in. It throws an error after the user logs in.
@joulev @alfon @Giant panda I love you all 😄
yes correct, and now in the right bar you can see the three people you pinged showing up
I love you all too
now that you know how to ping, feel free to ping your friends here if they are fine with it. it's 10:30pm here though so i won't be helping anyone anymore, that's it for today and i will also leave this thread
button element
MeKaOP
There is not. no button element between code blocks
<input type="submit" value={userLang('login')} className="cursor-pointer bg-black dark:bg-white rounded-md text-white dark:text-black font-bold text-lg hover:bg-gray-700 p-2 mt-8" />
I used input
I used input
try finding it in your source code
using the vscode search feature
it may be a imported third party components
@MeKa Click to see attachment
MeKaOP
This is exactly the page I use 'use client'. and I haven't loaded any different components.
@MeKa 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.
ts
import React from 'react'
import { redirect } from 'next/navigation'
import { getServerSession } from "next-auth/next"
import { authOptions } from "@/lib/auth";
import LoginWidget from './LoginWidget'
import { useLocale, NextIntlClientProvider } from 'next-intl';
const LoginPage = async () => {
const session = await getServerSession(authOptions)
const locale = useLocale();
let messages = (await import(`@/dictionaries/${locale}.json`)).default;
if (session) {
redirect('/')
}
return (
<NextIntlClientProvider
locale={locale}
messages={messages}
>
<LoginWidget />
</NextIntlClientProvider>
)
}
export default LoginPage;
other client page code is bellow
MeKaOP
page.tsx
its probably your <LoginWidget> then
try exporting LoginWidghet as Client Components
MeKaOP
Dipnot: There are no errors before the user logs in. It throws an error after the user logs in.
MeKaOP
/login/page.tsx => if there is a session "/" redirects here.
const session = await getServerSession(authOptions)
if (session) {
redirect('/')
}http://localhost:3000 => actually "/" gives the same error here as well.
so probably something at
/ thenAnswer
what is the layout.tsx at
/?MeKaOP
I found. I am trying to use signOut() in Server Component in AppLayout.
yay
and thats how you debug your code, folks
MeKaOP
It was fixed when I made a comment line. I need to convert it to Client Component.
i am happy i can be your rubber ducky
(pls dont set your layout into client components)
MeKaOP
You are the man. Thank you.
When the login and registration pages in the client components are not rendered on the server, the user can see the screen for 1 second even if they are logged in.
That's why I usually try to use the server component.
then initialize the login and registration pages as hidden pages :derp:
also why is your "pages" a client components
MeKaOP
that's what next-auth wants.
import { signIn, signOut } from "next-auth/react"
I guess login suggests using 'use client' to run logout?
I guess login suggests using 'use client' to run logout?
@MeKa import { signIn, signOut } from "next-auth/react"
I guess login suggests using 'use client' to run logout?
yes but you can just set the client component on JUST the button
not the entire page 🙃
MeKaOP
Yes, you are right
MeKaOP
@alfon
How can I send it with the above function?
const handleLogin = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
let eventForm = event.currentTarget;
const form = new FormData(eventForm)
const { email, password } = Object.fromEntries(form);
console.log(email, password)
signIn("credentials", { email, password });
}
<LoginButton title={userLang('login')} email={} password={} />How can I send it with the above function?
send what?
@alfon send what?
MeKaOP
I want to submit data collected with FormData.
use <form>?
MeKaOP
yes
useState is already unavailable in the server component.
ok
MeKaOP
In order to reach the form data, it remains to reach the FormData data with the name="name" tag.
im not sure im getting ya
before => const handleLogin = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
let eventForm = event.currentTarget;
const form = new FormData(eventForm)
const { email, password } = Object.fromEntries(form);
console.log(email, password)
signIn("credentials", { email, password });
}
event.preventDefault();
let eventForm = event.currentTarget;
const form = new FormData(eventForm)
const { email, password } = Object.fromEntries(form);
console.log(email, password)
signIn("credentials", { email, password });
}
mmm then set the client component on JUST the form :)
coz in my case i dont use credentials, and i have the privilege to set client comps just the button xD
MeKaOP
How can I pass the data I get from the Form in the server component to the client component?
MeKaOP
yes but how 😄
wym "Form in the server component"
MeKaOP
'use client'
import { signIn } from 'next-auth/react'
import React, { FC, MouseEventHandler } from 'react'
type Props = {
title: string,
email: string,
password: string
}
const LoginButton: FC<Props> = ({ title, email, password }) => {
const handleLogin: MouseEventHandler<HTMLButtonElement> = () => {
signIn("credentials", { email, password });
}
return (
<button onClick={handleLogin} className="cursor-pointer bg-black dark:bg-white rounded-md text-white dark:text-black font-bold text-lg hover:bg-gray-700 p-2 mt-8">
{title}
</button>
)
}
export default LoginButton;
import { signIn } from 'next-auth/react'
import React, { FC, MouseEventHandler } from 'react'
type Props = {
title: string,
email: string,
password: string
}
const LoginButton: FC<Props> = ({ title, email, password }) => {
const handleLogin: MouseEventHandler<HTMLButtonElement> = () => {
signIn("credentials", { email, password });
}
return (
<button onClick={handleLogin} className="cursor-pointer bg-black dark:bg-white rounded-md text-white dark:text-black font-bold text-lg hover:bg-gray-700 p-2 mt-8">
{title}
</button>
)
}
export default LoginButton;
<LoginButton title={userLang('login')} email={"(e) => e.target[0].value"} password={"(e) => e.target[1].value"} /> problm
Is there no way to do it without using redux or context api?
make the whole form client component
dude you're making it sound more complicated than it really is
MeKaOP
it was already like that, you made me work for 1 hour 😄
You said I could make the button a client component.