Next.js Discord

Discord Forum

setState not behaving the same between components

Unanswered
Giant panda posted this in #help-forum
Open in Discord
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:

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 console.log(res.message), it displays undefined
- If I log console.log(res), the output is correct
message 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!