Functions cannot be passed directly to Client Components unless you explicitly expose it by marking
Unanswered
American Wirehair posted this in #help-forum
American WirehairOP
when I use
'use client'; in this file it works fine but when I remove, it gives this errorFunctions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
<form action={function handleRegistrationSubmit} children=...>Registration.jsx
import { saveRegistration } from "@/actions/actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export function RegistrationDialog() {
const handleRegistrationSubmit = async (formData) => {
const result = await saveRegistration(formData);
if (result.success) {
} else {
console.log("Error!");
}
}
return (
<form action={handleRegistrationSubmit}>
<div className="">
<div className="">
<Label htmlFor="name" className="text-right">
Name
</Label>
<Input
type="text"
/>
</div>
<div className="">
<Label htmlFor="username" className="text-right">
Email
</Label>
<Input
type="email"
/>
</div>
</div>
<Button type="submit">Click to Join</Button>
</form>
);
}