DEV Community

Marc Philippe Beaujean

Posted on Dec 29, 2019

React Form Submission Handling - anyone got advice?

#react #help

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 😄

Top comments (4)

Nick Taylor • Dec 29 '19 • Edited

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:

Getting values in and out of form state
Validation and error messages
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

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.