Next.js Discord

Discord Forum

Can anybody please help me with how to display feedback message after submitting form ?

Unanswered
i_lost_to_loba_kreygasm posted this in #help-forum
Open in Discord
i_lost_to_loba_kreygasmOP
So I have a server action function and useFormStatus hook but I can't get it to show the feedback message , here is my code 
"use client";
import { useActionState } from "react";
import { useFormStatus } from "react-dom";
export default function OrderSuccess({placeOrder}){
    const { pending, data, method, action } = useFormStatus();
    console.log(data);
 
    return <div>Success</div>
}

2 Replies

Asian black bear
If you use useActionState wrapping the server action for a form submission, you can retrieve the state sent back by the server to display a message banner. Something like this:
async function serverAction(previousState: unknown, formData: FormData) {
  // ...
  return { success: true }
}

const [formAction, formState, isPending] = useActionState(serverAction, undefined)

return <form action={formAction}>{formState?.success && <div>Success!</div>}</form>
This should give you the rough outline, you just need to apply this in more detail of course.