How to use multiple forms on a single page?

[dcastil]

Hi Remix team and community! 👋

I'm just learning about Remix and wondering how to do loading states and optimistic updates when there are multiple forms on the same page.

The useTransition hook doesn't seem to be tied to any specific form as indicated in this discussion. My understanding is that if I have multiple forms on a page (e.g. a newsletter subscribe form and a contact form), the useTransition hook would return the same data for both forms which makes the API somewhat awkward to work with.

Also, as far as I understand there can be just a single action defined per page, so I'm not even sure whether I could implement the serverside logic without opting out of the Remix form handling.

How do you recommend dealing with multiple forms on the same page without them stepping onto each others' feet? Or is there something to improve that on the roadmap?

[hollandThomas]

It gets a bit verbose but here's how you can do it:

import type { ActionFunction } from 'remix';
import { Form, json, useTransition } from 'remix';

enum FormNames {
  FIRST_NAME_FORM = 'firstNameForm',
  LAST_NAME_FORM = 'lastNameForm',
}

export const action: ActionFunction = async ({ request }) => {
  await new Promise((res) => setTimeout(res, 1000));

  const formData = await request.formData();

  const formName = formData.get('formName');

  switch (formName) {
    case FormNames.FIRST_NAME_FORM:
      console.log('handle firstName form server side');
      return json({ firstName: formData.get('firstName') });

    case FormNames.LAST_NAME_FORM:
      console.log('handle lastName form server side');
      return json({ firstName: formData.get('lastName') });

    default:
    // handle default server side
  }
};

const Forms = () => {
  const transition = useTransition();

  const formName = transition.submission?.formData.get('formName');

  let firstNameFormText = 'Submit first name';
  let lastNameFormText = 'Submit last name';
  switch (formName) {
    case FormNames.FIRST_NAME_FORM:
      firstNameFormText =
        transition.state === 'submitting'
          ? 'Saving...'
          : transition.state === 'loading'
          ? 'Loading...'
          : 'Submit first name';

      break;
    case FormNames.LAST_NAME_FORM:
      lastNameFormText =
        transition.state === 'submitting'
          ? 'Saving...'
          : transition.state === 'loading'
          ? 'Loading...'
          : 'Submit last name';
      break;
    default:
    // handle default
  }

  return (
    <div>
      <Form method='post'>
        <label>
          First name
          <input name='firstName' type='text' />
        </label>
        <button name='formName' value={FormNames.FIRST_NAME_FORM}>
          {firstNameFormText}
        </button>
      </Form>
      <Form method='post'>
        <label>
          Last name
          <input name='lastName' type='text' />
        </label>
        <button name='formName' value={FormNames.LAST_NAME_FORM}>
          {lastNameFormText}
        </button>
      </Form>
    </div>
  );
};

export default Forms;

[dcastil]

Thanks for the example! I really hope that Remix can provide a better way to do this in the future. 😄

[na2hiro]

If multiple submission could/should happen at the same time, one Forms will "steal" the navigation from the other and it results in pending state rolled back, which is not a good UX.

In such cases, using useFetcher().Form for each type of submission would work nicely. This is the non-navigating version of Form. Remix Single: Concurrent Mutations w/ useFetcher video describes well about it.

For references for different types of requests, this cheatsheet might help.

[ccssmnn]

You can also use hidden inputs to identify the form on the server.

// in your action
const requestType = form.get("request-type");
switch (requestType) {
  case "change-name":
    const name = form.get("name");
    ...
  case ...
}

// in your markup
<form method="post>
  <input value="change-name" name="request-type" readOnly hidden />
  ...
</form>

[luispuig]

Could this proposal #2782 a good option?

[DimaAmega]

You can try remix-validated-form form library

[karthik2265]

did remix add any improvements to handle this?

[sergiodxa]

No, its up to you how you handle them