React Form Submission Handling - anyone got advice?

I keep finding myself rewritting the same ol' submission logic for each form, with slight changes depending on the contents - however, each time, I write my logic into a separate script that looks really similar to the previous. Something along these lines:

• Disable the submission button
• Check and validate all the inputs
• Dispatch a post request
• Display the server errors if there was mistake,otherwise redirect/create a notification

Anyone able to help me out by sharing their solutions? Form submission patterns or frameworks to help me keep this a bit more dry are much appreciated 😄

Comments

[José Muñoz]

use Formik and stop re-writing logic, group it into re-usable pieces instead

[Nick Taylor]

Formik is solid. We used it where I used to work.

jaredpalmer / formik

Build forms in React, without the tears 😭

Build forms in React, without the tears

Visit jaredpalmer.com/formik to get started with Formik.

---

The below readme is the documentation for the canary (prerelease) version of Formik. To view the documentation for the latest stable Formik version visit jaredpalmer.com/formik/docs

---

Let's face it, forms are really verbose in React. To make matters worse, most form helpers do wayyyy too much magic and often have a significant performance cost associated with them. Formik is a small library that helps you with the 3 most annoying parts:

1. Getting values in and out of form state
2. Validation and error messages
3. Handling form submission

By colocating all of the above in one place, Formik will keep things organized--making testing, refactoring, and reasoning about your forms a breeze.

Docs

• Get Started
• API Reference
• Articles / Tutorials
• Get Help
• Release Notes

In-browser Playgrounds

You can play with Formik in your web browser with these live online…

View on GitHub

There is also Final Form, although I’ve never used it myself.

final-form / react-final-form

🏁 High performance subscription-based form state management for React

💰 Wanna get paid the big bucks writing React? Take this quiz and get offers from top tech companies! 💰

---

🏁 React Final Form

✅ Zero dependencies

✅ Only peer dependencies: React and 🏁 Final Form

✅ Opt-in subscriptions - only update on the state you need!

✅ 💥 3.0k gzipped 💥

---

💬 Give Feedback on React Final Form 💬

In the interest of making 🏁 React Final Form the best library it can be, we'd love your thoughts and feedback.

Take a quick survey.

---

React Final Form is a thin React wrapper for Final Form, which is a subscriptions-based form state management library that uses the Observer pattern, so only the components that need updating are re-rendered as the form's state changes.

Getting Started

Philosophy

Examples

API

FAQ

View on GitHub

In terms of posting the form and processing errors, it sounds like you’ve done the same thing a bunch of times. Maybe just create little helpers for that.

[Marc Philippe Beaujean]

Formik seems exactly like what I'm looking for - thanks, I'll check it out 😊

[Jimmy McBride]

Formik is leet 🔥