How to use useFetcher.Form in a child component?

[bouteillerAlan]

Hello, I have a simple use case, but I can't find a way to make it work. I'm pretty sure I'm missing something here.

I have my route file with the action setup to get the data from the submit like the doc say to do it:

import type { Route } from "./+types/login";
import LoginPage from "~/_shared/login";

export function meta({}: Route.MetaArgs) {
  return [
    { title: "Login" },
    { name: "description", content: "Welcome" },
  ];
}

export async function action({request}: Route.ActionArgs) {
  const formData = await request.formData();
  const name = String(formData.get("name"));
  const password = String(formData.get("password"));
  console.log(name, password);
}

export default function Login() {
  return <LoginPage/>;
}

And I have the LoginPage component:

import { GalleryVerticalEnd } from "lucide-react";
import { LoginForm } from "@components/custom/login-form";
import {m} from "~/.paraglide/messages";
import {useFetcher} from "react-router";

export default function LoginPage() {
  let fetcher = useFetcher({key: "loginForm"});
  return (
    <div className="grid min-h-svh lg:grid-cols-2">
      <div className="flex flex-col gap-4 p-6 md:p-10">
        <div className="flex justify-center gap-2 md:justify-start">
          <a href="#" className="flex items-center gap-2 font-medium">
            <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
              <GalleryVerticalEnd className="size-4" />
            </div>
            {m.welcome()}
          </a>
        </div>
        <div className="flex flex-1 items-center justify-center">
          <div className="w-full max-w-xs">
            <LoginForm fetcher={fetcher}/>
          </div>
        </div>
      </div>
      <div className="bg-muted relative hidden lg:block">
        <img
          src="/imgs/front-img.jpg"
          alt="Image"
          className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
        />
      </div>
    </div>
  )
}

I pass the fetcher to the children component via the props:

import React from "react";
import {cn} from "@lib/utils";
import {m} from "~/.paraglide/messages";
import { Button } from "@components/ui/button";
import { Input } from "@components/ui/input";
import { Label } from "@components/ui/label";
import {type FetcherWithComponents} from "react-router";

type LoginFormProps = {
  fetcher: FetcherWithComponents<any>
  className?: React.ComponentProps<"form">
}

export function LoginForm({fetcher, className}: LoginFormProps) {
  return (
    <fetcher.Form method="POST" className={cn("flex flex-col gap-6", className)}>
      <div className="flex flex-col items-center gap-2 text-center">
        <h1 className="text-2xl font-bold">{m.login_to_your_account()}</h1>
        <p className="text-muted-foreground text-sm text-balance">
          {m.enter_your_email_below_to_login()}
        </p>
      </div>
      <div className="grid gap-6">
        <div className="grid gap-3">
          <Label htmlFor="name">{m.labelId()}</Label>
          <Input id="name" type="text" placeholder="" required />
        </div>
        <div className="grid gap-3">
          <div className="flex items-center">
            <Label htmlFor="password">{m.labelPassword()}</Label>
          </div>
          <Input id="password" type="password" required />
        </div>
        <Button type="submit" className="w-full">
          {m.labelLogin()}
        </Button>
      </div>
    </fetcher.Form>
  )
}

But the console.log in the action() function tell me I have null, null. I try to setup the fetcher with a custom key but I have the same result, or an error if I try to load it in the action function with fetcher.data.

Thanks for the help.

[bouteillerAlan]

Solution > just don't forget to add the name value on each input