setState not behaving the same between components
Unanswered
Giant panda posted this in #help-forum
Giant pandaOP
I have two forms in two separate components that call server actions. They're structured the same and use a lot of the same code. In the working component, I have the following onSubmit function when the form is submitted:
And in the return of the component, I check if the
This all works completely fine and the error displays correctly. However, in a different form component, I'm doing essentially the same thing:
In this component,
Any idea what I could be doing wrong here?
const onSubmit = async (values: z.infer<typeof formSchema>) => {
setIsSubmitting(true);
setError(undefined);
const res = await createUser({
fullName: values.fullName,
email: values.email.toLowerCase(),
password: values.password,
});
setIsSubmitting(false);
if (!res.success) {
setError(res.message);
} else {
toast({
variant: "success",
title: "Successfully created user",
description: "You may now log in.",
});
router.push("/login");
}
};And in the return of the component, I check if the
error variable I set in the onSubmit function is defined to display an error.{error && (
<Alert
variant="destructive"
className="mb-6"
>
<AlertCircleIcon className="h-4 w-4" />
<AlertDescription>{error}</AlertDescription>
</Alert>
)}This all works completely fine and the error displays correctly. However, in a different form component, I'm doing essentially the same thing:
const onSubmit = async (values: z.infer<typeof formSchema>) => {
setIsSubmitting(true);
setError(undefined);
const res = await changeUserEmail({
newEmail: values.email.toLowerCase(),
password: values.password,
});
setIsSubmitting(false);
if (!res.success) {
setError(res.message);
} else {
toast({
variant: "success",
description: "Email changed!",
});
form.reset({
email: "",
password: "",
});
}
};
/* ---------- */
{error && (
<Alert
variant="destructive"
className="mb-6"
>
<AlertCircleIcon className="h-4 w-4" />
<AlertDescription>{error}</AlertDescription>
</Alert>
)}In this component,
error never displays at all. If I console.log(res) right before or after the setError(res.message) call, the res object is how I expect it to look and the message variable is defined.Any idea what I could be doing wrong here?
5 Replies
Giant pandaOP
I've just noticed in console:
- If I log
- If I log
- If I log
console.log(res.message), it displays undefined- If I log
console.log(res), the output is correctmessage is mispelled
@Velo message is mispelled
Giant pandaOP
of course the error was something like this lmfao. This is what I get for staring at my computer for this long without a break
thanks!