useActionDataReturns the serialized data from the most recent route action or undefined if there isn't one. This hook only returns action data from the route in context — it cannot access data from other parent or child routes.
import type { ActionFunctionArgs } from "@remix-run/node"; // or cloudflare/deno import { json } from "@remix-run/node"; // or cloudflare/deno import { Form, useActionData } from "@remix-run/react"; export async function action({ request, }: ActionFunctionArgs) { const body = await request.formData(); const name = body.get("visitorsName"); return json({ message: `Hello, ${name}` }); } export default function Invoices() { const data = useActionData<typeof action>(); return ( <Form method="post"> <input type="text" name="visitorsName" /> {data ? data.message : "Waiting..."} </Form> ); } Guides
Related API
Discussions
