mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Lee RobinsonandGitHub
ec46f90739
We recently merged and combined the RC docs into the main docs, so there is a single codebase. This added new icons and callouts for parts of Next.js that are experimental or in a canary release. However, this gets a little tricky with React 19. There have been changes to `useFormState` and `useFormStatus` which differ from the latest v14.x release and 15 + React 19 RC. As 14 is still the stable release, we need to default to showing `useFormState` and add proper callouts for those on canary/RC. I also added more details to the upgrade guide for v15.
36 lines
851 B
TypeScript
36 lines
851 B
TypeScript
"use client";
|
|
|
|
import { useActionState } from "react";
|
|
import { useFormStatus } from "react-dom";
|
|
import { deleteTodo } from "@/app/actions";
|
|
|
|
const initialState = {
|
|
message: "",
|
|
};
|
|
|
|
function DeleteButton() {
|
|
const { pending } = useFormStatus();
|
|
|
|
return (
|
|
<button type="submit" aria-disabled={pending}>
|
|
Delete
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export function DeleteForm({ id, todo }: { id: number; todo: string }) {
|
|
// useActionState is available with React 19 (Next.js App Router)
|
|
const [state, formAction] = useActionState(deleteTodo, initialState);
|
|
|
|
return (
|
|
<form action={formAction}>
|
|
<input type="hidden" name="id" value={id} />
|
|
<input type="hidden" name="todo" value={todo} />
|
|
<DeleteButton />
|
|
<p aria-live="polite" className="sr-only" role="status">
|
|
{state?.message}
|
|
</p>
|
|
</form>
|
|
);
|
|
}
|