What's the best way to pass lazy-computed data to an action?

[focux]

I'm building a form with an editor and as you might know, controlled editors don't perform well, so you need to get the editor value at the moment the user submits the form. So far this is what I'm doing and everything works but the types, so I'm not sure whether there's a better way with typescript support to do this:

const FormComponent = () => {
  const [state, formAction] = useFormState(createBanner, { error: "" });
  const editorRef = useRef<{ getHTML: () => string | undefined }>();

  return (
    <form
      className="flex h-full flex-row pt-6"
      action={(formData) => {
        const content = editorRef.current?.getHTML();
        if (content) {
          formData.set("content", content);
        }
        // @ts-expect-error the formAction signature is () => void
        // instead of (data: FormData) => void
        formAction(formData);
      }}
    >
      {/*  Content */}
    </form>
  );
};

In this specific case, .bind doesn't work because you cannot pass a client function to a server function.

[Vijaykv5]

Hi @focux
To improve TypeScript type safety, use a function for form submission. Define a formAction to accept FormData, ensuring type compatibility.

Sample code below :

const FormComponent = () => {
  const editorRef = useRef<{ getHTML: () => string | undefined }>();

  const handleSubmit = (formData: FormData) => {
    const content = editorRef.current?.getHTML();
    if (content) {
      formData.set("content", content);
    }
    formAction(formData);
  };

  return (
    <form className="flex h-full flex-row pt-6" onSubmit={(e) => {
      e.preventDefault();
      handleSubmit(new FormData(e.target as HTMLFormElement));
    }}>
      {/* Content */}
    </form>
  );
};

By this way, you can pass lazy-computed data to an action.

[focux]

Hmm, that's basically the same that I was doing using the action prop.

Also, forgot to say that I'm using useFormState, and the action function signature returned by the hook is () => void, so there's gonna still be types issues when passing the form data. The problem is not the action prop itself but the type signature returned by useFormState.

[Vijaykv5]

but if useFormState returns () => void, then it can doesn't accept any arguments right? So it can lead to type issues when trying to pass form data
So inorder to resolve types issue, you might need to adjust how you're handling form submission