Mastering Form Handling in React with Formik: A Comprehensive Guide
Written on
Chapter 1: Introduction to Formik
Formik is a powerful library designed to streamline the process of handling forms in React applications. In this guide, we will explore how to effectively manage form inputs using Formik.
This video titled "Easy form handling in React using Formik!" provides a beginner-friendly overview of implementing Formik in your projects.
Installation
To get started with Formik, you can install it via npm or yarn by executing the following command:
npm install formik --save
or
yarn add formik
Basic Usage
Here’s a simple implementation of Formik in your React application:
import React from "react";
import { Formik } from "formik";
export default function App() {
return (
<Formik
initialValues={{ email: "", password: "" }}
validate={values => {
const errors = {};
if (!values.email) {
errors.email = "Required";} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$/i.test(values.email)) {
errors.email = "Invalid email address";}
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting
}) => (
<form onSubmit={handleSubmit}>
<div>
<input
type="email"
name="email"
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
/>
{errors.email && touched.email && errors.email}
</div>
<div>
<input
type="password"
name="password"
onChange={handleChange}
onBlur={handleBlur}
value={values.password}
/>
{errors.password && touched.password && errors.password}
</div>
<button type="submit" disabled={isSubmitting}>
Submit</button>
</form>
)}
</Formik>
);
}
In this example, initialValues specifies the default values, while validate serves to check the validity of the form inputs. The values object holds the current form data, and we populate the errors object with any validation issues.
The onSubmit function captures the form data, and setSubmitting allows us to manage the submission state. The form is set to call handleSubmit when submitted, and the input values are linked to their respective fields.
We can enhance this code further by utilizing the Form, Field, and ErrorMessage components provided by Formik:
import React from "react";
import { ErrorMessage, Field, Form, Formik } from "formik";
export default function App() {
return (
<Formik
initialValues={{ email: "", password: "" }}
validate={values => {
const errors = {};
if (!values.email) {
errors.email = "Required";} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$/i.test(values.email)) {
errors.email = "Invalid email address";}
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<Field type="email" name="email" />
<ErrorMessage name="email" component="div" />
</div>
<div>
<Field type="password" name="password" />
<ErrorMessage name="password" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Submit</button>
</Form>
)}
</Formik>
);
}
Using these components simplifies the code significantly. As long as the name attributes in the Field and ErrorMessage components match, the error messages will automatically correspond to the relevant fields.
Conclusion
Formik makes it remarkably straightforward to manage forms in React. By following the guidelines outlined in this article, you can enhance your form handling capabilities with minimal effort.
If you found this article helpful, consider subscribing to our YouTube channel for more insightful content!
This second video, "Formik tutorial, simple forms in react," offers a deeper dive into creating forms with Formik, perfect for those looking to expand their knowledge.