Next.js Discord

Discord Forum

formdata returns null on server action

Answered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
Hi, I am using the "new" way of creating the form with server actions, and I get null as a value all the time:
"use client";
import { useFormState, useFormStatus } from "react-dom";

import { subscribeUser } from "~/app/actions/email-subscribe";
import { Button } from "~/ui/button";
import { Icons } from "~/ui/icons";
import { Input } from "~/ui/input";

const initialState = {
  email: null,
};
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <Button
      className=" h-8 w-8"
      size="icon"
      variant="ghost"
      disabled={pending}
      type="submit"
    >
      {pending ? (
        <Icons.spinner className="h-3 w-3 animate-spin" aria-hidden="true" />
      ) : (
        <Icons.send className="h-4 w-4" aria-hidden="true" />
      )}
    </Button>
  );
}
export function SubscribeForm() {
  const [state, formAction] = useFormState(subscribeUser, initialState);
  console.log("state", state);
  return (
    <div>
      <form className="grid w-full" action={formAction}>
        <label className="sr-only" htmlFor="email-subscription">
          Email
        </label>
        <div className="flex w-full  items-center space-x-2">
          <Input
           
            id="email-subscription"
            name="email-subscription"
            className="pr-12"
            required
          />

          <SubmitButton />
        </div>
        <p aria-live="polite" className="sr-only" role="status">
          {state?.message}
        </p>
      </form>
    </div>
  );
}

And yes I tried using <input/>, no luck, state = undefined, email = null
Answered by Blue horntail woodwasp
I see that you use email-subscription as input name. not email.
that formData reference to input name.

Please try to formData.get("email-subscription") as string
View full answer

9 Replies

Blue horntail woodwasp
where is your action ?
do you create separate files?
that state are storing returned value from your subscribeUser action. what you return?
@Blue horntail woodwasp that `state` are storing returned value from your `subscribeUser` action. what you return?
Cape lionOP
oh, know I see how state works. But my concern is primarily why formdata returns null value. Here is my server action:
"use server";

export async function subscribeUser(prevState: any, formData: FormData) {
  const email = formData.get("email") as string;
  console.log("email", email);
  return email;
}

thats just for testing purposes
Blue horntail woodwasp
I see that you use email-subscription as input name. not email.
that formData reference to input name.

Please try to formData.get("email-subscription") as string
Answer
Blue horntail woodwasp
never mind. Happy to help 🔥
you can mark my chat as the answer, so people searching with same issue will also know the answer
Original message was deleted
Blue horntail woodwasp
please follow this step