Error: Event handlers cannot be passed to Client Component props.
Answered
Havana posted this in #help-forum
HavanaOP
Error:
What if I don't want to use a client component?
Unhandled Runtime Error
Error: Event handlers cannot be passed to Client Component props.
<button className=... onClick={function} children=...>
^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.What if I don't want to use a client component?
12 Replies
@Havana Error:
bash
Unhandled Runtime Error
Error: Event handlers cannot be passed to Client Component props.
<button className=... onClick={function} children=...>
^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
What if I don't want to use a client component?
what is the function? is it server action?
HavanaOP
<Button className="flex-1" onClick={() => console.log("Submit")}>
Submit
</Button>@Havana tsx
<Button className="flex-1" onClick={() => console.log("Submit")}>
Submit
</Button>
oh you need client component for this
Answer
if its a server action, you could use form instead of button
HavanaOP
is it because this function uses console.log?
I have no idea how to use the server action and I think it's the solution for my situation.
Can you help me make this form send a message throw a webhook using server action?
HavanaOP
nope
Thanks anyways!
@Havana Can you help me make this form send a message throw a webhook using server action?
export default function Page() {
async function sendMessage(formData: FormData) {
"use server";
const email = formData.get("email");
const subject = formData.get("subject");
const message = formData.get("message");
if (
typeof email !== "string" ||
typeof subject !== "string" ||
typeof message !== "string"
)
return;
await fetch("", {
method: "POST",
body: JSON.stringify({ email, subject, message }),
});
}
return (
<form action={sendMessage}>
<input type="email" name="email" />
<input type="text" name="subject" />
<input type="text" name="message" />
<button>Submit </button>
</form>
);
}HavanaOP
Thanks man