Formik

In this final part of our series on building React forms, we’ll rebuild the form from parts 1 and 2 with Formik. We’ll discuss some benefits a drawbacks of using Formik, and highlight the alternatives.

In this tutorial we’ll modify our basic form by taking control of the form’s state. In doing this we’ll create what React calls a “controlled component.” With a controlled component we’ll have more control over the form, allowing us to create a consistent validation experience, and customize it however we like.

There’s no “right way” to build forms in React and there are a lot of options. It’s simple enough to have a working form, but what about validation? Can you rely on the browser’s default validation, or should you write your own state handlers, or drop in a form library?