The downside of Formik is that, like any library, it makes assumptions about how the form should work. Using Formik’s Field and ErrorMessage components give us a concise way to build the form HTML. Much of the state and rule definitions are done for us. Otherwise the form is identical to the HTML form we created in Part 2.Īs we’ve mentioned a few times, the main benefits of Formik and Yup are that they save us time.

The render function takes advantage of the and components to automatically handle state updates from Formik.

There are many more validation rules that we can take advantage of listed in the Yup docs.

The Yup API allows us to chain rules together, making our rule definitions relatively easy to read. On line 6 we’ve defined two validation rules using Yup that match the validation we performed in Part 2.Previously we needed to managing that state ourselves. The handleOnSubmit function uses Formik provided actions for resetForm and setSubmitting on lines 26 and 31.This is similar to, though a bit simpler than, our server state handling from Part 1. We’ve done that by defining serverState and handleServerResponse on line 16. However, we still need some way to track and display the response from the server. Formik takes care of the isSubmitting state.Formik was built specifically to work with Yup.įirst let’s add Formik and Yup to our environment: In addition to Formik, we’re going to use Yup, a fully featured validation library with a composeable rule API. Building a Formik contact form with validation It’s pretty clear how a form library like Formik coupled with a validation library can save us a lot of time.Īs with the previous parts, we’re working with Formspree on the backend, but the principles should still apply if you’re using your own form backend. For thorough validation we’d need to write a lot more code. Also, our validation system in Part 2 was rudimentary. If the form were to become more complex we’d need to duplicate a lot of change-handling boilerplate. However, it was much more complex than our example from Part 1 that used default browser validation. That form allowed us to take full control of the UX and create simple but fully custom input validation. To recap: in Part 2 we created a controlled component form and implemented our own validation with useState and useEffects. We’ll discuss some benefits a drawbacks of using Formik, and highlight the alternatives. In this final part of our series on building React forms, we’ll rebuild the form from parts 1 and 2 with Formik. Formik is a form library that’s very flexible, but also has a concise interface that’s quick to learn.

Complex forms react