Formik HandleChange in React: A Simple Guide For Beginners

Struggling to manage form input in React?

Handling user input can get messy, especially with multiple fields. Writing separate functions for each field takes time and adds extra code.

That's where Formik handleChange helps. It simplifies form handling by managing onChange events automatically. This keeps your code clean and makes forms easier to manage.

This blog walks through how it works, ways to customize it, and how to use it inside a React component.

Let's get started!

Understanding Formik handleChange

What is Formik handleChange?

Formik handleChange is an event handler that updates form values when an input field changes. It abstracts the process of managing state updates in form components.

How It Works

When a user types into an input field, Formik handleChange updates the corresponding value in formik.state. This ensures that form values stay in sync with user input.

Here’s how Formik handleChange is used in a React component:

Copy
import React from "react";
import { useFormik } from "formik";

const MyForm = () => {
  const formik = useFormik({
    initialValues: { email: "", username: "" },
    onSubmit: (values) => {
      console.log("Form submitted:", values);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        type="text"
        name="username"
        onChange={formik.handleChange}
        value={formik.values.username}
      />
      <input
        type="email"
        name="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

Breaking Down the Code

• useFormik initializes form values and manages the submission process.

• formik.handleChange updates the form state when an input field is modified.

• formik.values keeps track of the latest input values.

• The submit button triggers form submission when clicked.

Handling Form State with Formik handleChange

Managing Form Values

Using Formik handleChange, form values are updated in real time as users type into input fields. The formik.values object stores the latest values.

Example: Tracking Form Values

Copy
console.log("Current form values:", formik.values);

This prints the updated form values every time an input field changes.

Form State and Validation

Formik handleChange works seamlessly with validation methods like Yup. Form validation helps catch errors before form submission.

Example: Adding Yup Validation

Copy
import * as Yup from "yup";

const validationSchema = Yup.object({
  email: Yup.string().email("Invalid email address").required("Required"),
  username: Yup.string().min(3, "Too short").required("Required"),
});

By integrating validation, error messages appear when input values are invalid.

Handling Validation and Error Messages

Displaying Errors Object

Formik tracks validation errors in an errors object. The errors object stores validation messages for each input field.

Example: Rendering Error Messages

When validation fails, the error message displays beneath the corresponding input field.

Handling Validation in Formik

To enable validation, pass a validate function or a Yup schema to Formik.

Example: Custom Validation Function

This function returns errors when form values are invalid.

Working with Form Submission

Handling Form onSubmit

Formik simplifies the form submission process with an onsubmit function. The onsubmit function runs when the submit button is clicked.

Example: Handling Form Submission

Preventing Submission with Validation Errors

Formik prevents form submission if validation errors exist. The submit button only triggers submission when all required fields are valid.

Example: Disabling Submit Button on Validation Errors

This ensures that users can only submit the form when validation passes.

Handling Input Fields with Formik

Using Input Fields

Formik automatically binds input fields to the form state.

Example: Handling Multiple Inputs

When a user types into an input field, Formik handleChange updates the corresponding form values.

Using Formik Components

Formik provides prebuilt form components like Field and ErrorMessage to simplify form handling.

Example: Using Formik Components

Using formik components makes form handling more concise.

Advanced Features of Formik handleChange

Using React Context for Form State

Formik’s context API allows multiple components to access form state.

Example: Accessing Formik Context

This component dynamically updates the submit button based on form validation.

Handling Multiple Input Fields Dynamically

For dynamic forms, Formik handleChange can manage multiple input fields efficiently.

Example: Generating Dynamic Inputs

This creates a flexible form that adapts to different input fields.

Build Better Forms with Formik handleChange

Formik handleChange makes form handling easier in React. It updates input values, manages errors, and improves form submission.

Using Formik handleChange reduces repetitive code and keeps forms structured. It works well with validation methods and error handling, making forms more reliable.

By adding Formik to your project, you can manage forms with less effort. It helps create smoother user experiences and keeps your code clean.

{formik.errors.username && <div>{formik.errors.username}</div>}
{formik.errors.email && <div>{formik.errors.email}</div>}

const validate = (values) => {
  let errors = {};
  if (!values.email) {
    errors.email = "Email is required";
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = "Invalid email address";
  }
  return errors;
};

const formik = useFormik({
  initialValues: { email: "", username: "" },
  validate,
  onSubmit: (values) => {
    console.log("Form is submitted with values:", values);
  },
});

<button type="submit" disabled={!formik.isValid || formik.isSubmitting}>
  Submit
</button>

<input type="text" name="username" onChange={formik.handleChange} value={formik.values.username} />
<input type="email" name="email" onChange={formik.handleChange} value={formik.values.email} />

import { Formik, Form, Field, ErrorMessage } from "formik";

<Formik
  initialValues={{ email: "" }}
  validationSchema={validationSchema}
  onSubmit={(values) => console.log(values)}
>
  <Form>
    <Field type="email" name="email" />
    <ErrorMessage name="email" />
    <button type="submit">Submit</button>
  </Form>
</Formik>;

import { useFormikContext } from "formik";

const SubmitButton = () => {
  const { isValid, isSubmitting } = useFormikContext();
  return <button type="submit" disabled={!isValid || isSubmitting}>Submit</button>;
};

{fields.map((field, index) => (
  <input key={index} name={field.name} onChange={formik.handleChange} value={formik.values[field.name]} />
))}