Server & client components
Unanswered
Great Auk posted this in #help-forum
Great AukOP
Hi! I want to have my React form (client component) be used inside a server component - this component would actually run the form. Problem is that I want to be able to send a toast if something goes wrong inside of the server-side function.
6 Replies
Great AukOP
export default async function UniAdd() {
const { toast } = useToast(); // error -- this is a server component
async function addUni(vals: z.infer<typeof uniAddFormSchema>) {
"use server";
prisma.university
.create({
data: { ...vals, aliases: vals.aliases.split(" ") },
})
.catch(() => {
console.log("uni already exists");
// TOAST HERE, CLIENT SIDE
});
console.log("hello");
}
return (
<div>
<h1>hello</h1>
<UniAddForm action={addUni} />
</div>
);
}Is this possible using what I have here?
Masai Lion
i usually make a separate component for client stuff and import it to server component, dunno if thats right tho
@Great Auk ts
export default async function UniAdd() {
const { toast } = useToast(); // error -- this is a server component
async function addUni(vals: z.infer<typeof uniAddFormSchema>) {
"use server";
prisma.university
.create({
data: { ...vals, aliases: vals.aliases.split(" ") },
})
.catch(() => {
console.log("uni already exists");
// TOAST HERE, CLIENT SIDE
});
console.log("hello");
}
return (
<div>
<h1>hello</h1>
<UniAddForm action={addUni} />
</div>
);
}
Asiatic Lion
i think the action has to be inside the form in uniAddForm
the action in this case would just be a prop
what does UniAddForm look like, the component