How to handle multiple forms on the same page?

[vedantroy]

If I have multiple forms on the same route, is there a good way to handle them with this library?

[airjp73]

You can handle multiple forms on a page exactly the same way you would with plain remix. If you would normally use useFetcher, you can pass that to the fetcher prop of the form.

Is there a particular use-case you're having trouble with?

[vedantroy]

Thanks for quick response.

My plan was to use the action reducer pattern:
https://sergiodxa.com/articles/multiple-forms-per-route-in-remix#the-action-reducer-pattern

Basically: Having a type discriminator on formData and do something like:

function LikeForm({ id, type }: { id: string; type: string }) {
  return (
    // no action required here anymore
    <Form method="post">
      <input type="hidden" name={type} value={id} />{" "}
      <button type="submit" name="action" value="like">
        Like
      </button>
    </Form>
  );
}

  let formData = await request.formData();
  switch (formData.get("action")) {
    case "like": {
      // do something here
      return json(result);
    }
    case "another case": {
      // do something else here
      return json(result);
    }
    default: {
      throw new Error("Unknown action");
    }
  }

but it seems like that pattern would not work with this library since how would the form distinguish between different validation errors for different forms?

I'm just not sure what the recommended approach is.

[airjp73]

We have built-in support for this pattern via the subaction prop.