useFormContext for multiple (n) forms in the page

[ayrtonvwf]

Hello.

I'm using remix-validated-form on a intranet / feed app and it's been great.

On the feed page I have multiple posts (10 loaded with the page load and loading more automatically when the user reaches the bottom).
Each post has one form for creating a comment.

I have used in other pages useIsSubmitting('the-form-id') and useFormContext('the-form-id') to trigger a form reset when the submit is finished.

I'm unsure about how to proceed with this multiple forms page though. The number of forms is dynamic (10 at first and growing as the user reaches the bottom).

What should the optimal way to handle this look like?

[airjp73]

Hi!

If all you're doing is resetting after submit, you can use the reserAfterSubmit prop. If you're resetting on a button press, you can use the native <button type="reset" /> instead of the hook.

More generally about the useFormContext hook, you have a couple options depending on your case.

1. If you use useFormContext from a descendant of the ValidatedForm, maybe by pulling your logic into a component, you can omit the form id entirely.

2. You can use a dynamic value for the form id. If you have a list of posts, I'm guessing the post has some sort of id you can use.

const PostForm = ({ postId }) => {
  const formId = `post-${postId}`;
  const context = useFormContext(formId);

  // Pass the same id to the form
};

Hope that helps!

[ayrtonvwf]

Thanks for the help!

resetAfterSubmit is what I was looking for!

Somehow I entirely missed the ValidatedForm page from the docs 😅