Simplifying Forms in React with Formik
Simplifying Forms in React with Formik
As software engineers, we often encounter complex forms in our React applications. Managing form states, validation, and submission can be a cumbersome task. But with Formik, we can simplify this process.
Formik is a small library that helps you with the 3 most annoying parts of forms in React:
- Getting values in and out of form state
- Validation and error messages
- Handling form submission
Let's dive into how we can leverage Formik to simplify our React forms.
Formik Installation
You can install Formik by running npm install formik or yarn add formik in your terminal.
npm install formik
Using Formik
Formik provides a Formik component that we can use to wrap our form. This Formik component takes initial values for our form, an onSubmit function, and a function that returns our form.
Here is an example of a simple form with Formik:
import React from 'react';
import { Formik, Field, Form } from 'formik';
const BasicForm = () => (
<Formik
initialValues={{ email: '', password: '' }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<Field type="email" name="email" />
<Field type="password" name="password" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
);
export default BasicForm;
Formik simplifies forms in React, making our code cleaner and simpler to understand. For more complex examples and to understand how Formik handles form submission, validation, and error messages, check out the Formik documentation.
Remember: "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." - Martin Fowler
Related: