dev
Viewing docs for dev branch, not the latest release. View latest
useActionData

useActionData

Returns 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 can not 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>
  );
}

Additional Resources

Guides

Related API

Discussions

Docs and examples licensed under MIT