Next.js Discord

Discord Forum

useFormStatus is not working

Unanswered
Harlequin posted this in #help-forum
Open in Discord
HarlequinOP
"use client";
import Link from "next/link";
import { useFormStatus } from "react-dom";
...

export function LoginForm({ registerUser }: any) {
  const { pending } = useFormStatus();

  return (
    <Card className="mx-auto max-w-sm">
      <CardHeader>
        <CardTitle className="text-2xl">Register</CardTitle>
        <CardDescription>Create an account</CardDescription>
      </CardHeader>
      <CardContent>
        <form action={registerUser}>
          <div className="grid gap-4">
            <div className="grid gap-2">
              <Label htmlFor="email">Email</Label>
              <Input
                name="email"
                type="email"
                placeholder="m@example.com"
                required
              />
            </div>
            <div className="grid gap-2">
              <div className="flex items-center">
                <Label htmlFor="password">Password</Label>
                <Link
                  href="#"
                  className="ml-auto inline-block text-sm underline"
                >
                  Forgot your password?
                </Link>
              </div>
              <Input name="password" type="password" required />
            </div>
            <Button type="submit" className="w-full">
              Register
      
          </div>
          <pre>{JSON.stringify(pending, null, 2)}</pre>
          {pending && <div className="mt-4 text-center">Loading...</div>}
        </form>
        <div className="mt-4 text-center text-sm">
          Don&apos;t have an account?{" "}
          <Link href="#" className="underline">
            Sign up
          </Link>
        </div>
      </CardContent>
    </Card>
  );
}
`
can anyone tell me why my formstatus is not updated?

4 Replies

HarlequinOP
this is my action
"use server";

async function sleep(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}
export async function registerUser(formData: FormData) {
  const allValues = Object.fromEntries(formData.entries());
  console.log(allValues);
  await sleep(3000);
  console.log("DONE");
}
`
@Harlequin "use client"; import Link from "next/link"; import { useFormStatus } from "react-dom"; ... export function LoginForm({ registerUser }: any) { const { pending } = useFormStatus(); return ( <Card className="mx-auto max-w-sm"> <CardHeader> <CardTitle className="text-2xl">Register</CardTitle> <CardDescription>Create an account</CardDescription> </CardHeader> <CardContent> <form action={registerUser}> <div className="grid gap-4"> <div className="grid gap-2"> <Label htmlFor="email">Email</Label> <Input name="email" type="email" placeholder="m@example.com" required /> </div> <div className="grid gap-2"> <div className="flex items-center"> <Label htmlFor="password">Password</Label> <Link href="#" className="ml-auto inline-block text-sm underline" > Forgot your password? </Link> </div> <Input name="password" type="password" required /> </div> <Button type="submit" className="w-full"> Register </div> <pre>{JSON.stringify(pending, null, 2)}</pre> {pending && <div className="mt-4 text-center">Loading...</div>} </form> <div className="mt-4 text-center text-sm"> Don&apos;t have an account?{" "} <Link href="#" className="underline"> Sign up </Link> </div> </CardContent> </Card> ); } ` can anyone tell me why my formstatus is not updated?
Ray
you need to create another component and render it within the form in order to use useFormStatus()

function SubmitButton() {
   const { pending } = useFormStatus();

   return <Button type="submit" className="w-full">Register</Button>
}
HarlequinOP
wtf is that? is there not other easy way to do that? That feels not natural for me
@Harlequin wtf is that? is there not other easy way to do that? That feels not natural for me
Ray
just a react component, render it in the form and it should work