Unable to add interactivity

[tuppers360]

Hi

Firstly thanks do much for this code and the videos that come with it, it has really helped a lot.

I am struggling to pass const { isSubmitting } = form.formState; to a button component or use const { pending } = useFormStatus(); to display a spinner when submitting a form.

I believe its due to how the form is submitted using: ref={formRef} action={formAction} onSubmit={(evt) => { form.handleSubmit(() => { formAction(new FormData(formRef.current!)); })(evt); }}

Is there something I am missing here?

Thanks

[jherr]

This is a known issue. There will be a new useAction hook that unifies useFormState and useFormStatus.

[tuppers360]

Super thanks for replying! I was going a little stir crazy trying to figure that out!

Using your youtube video with onSubmit={() => { form.handleSubmit(() => formRef?.current?.submit()); }}

instead seems to work but not sure it isn't causing any issues elsewhere

[jherr]

You should check the most recent code on that, some folks found issues with submitting after a navigation and this was the fix:

        onSubmit={(evt) => {
          evt.preventDefault();
          form.handleSubmit(() => {
            formAction(new FormData(formRef.current!));
          })(evt);
        }}

[kam-st]

I tried using most recent code. This causes form not to reset. Following code works well for resetting.

 onSubmit={(evt) => {
          evt.preventDefault();
          form.handleSubmit(() => {
            formRef.current?.submit();
          })(evt);
        }}

Sorry, but not sure what bug following code is fixing. Would you be able to help. So I don't miss issues.

formAction(new FormData(formRef.current!));