How to Use Formik in React for Easy Form Handling

To use Formik in React, import the useFormik hook from the library, then call it inside your component to handle form state and submission. Use the returned formik object to connect your form inputs with formik.values, formik.handleChange, and formik.handleSubmit for easy form management.

Syntax

The basic syntax involves importing useFormik from Formik, then calling it inside your React component to get form state and handlers. You pass an object with initialValues for form fields and an onSubmit function to handle form submission.

• initialValues: Object with keys matching form fields and their initial values.
• onSubmit: Function called when the form is submitted.
• formik.handleChange: Function to update form state on input changes.
• formik.handleSubmit: Function to handle form submission event.
• formik.values: Current values of the form fields.

jsx

import { useFormik } from 'formik';

function MyForm() {
  const formik = useFormik({
    initialValues: { fieldName: '' },
    onSubmit: values => {
      console.log(values);
    },
  });

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

Output

A form with one input field and a submit button that logs the input value on submit.

Example

This example shows a simple React form using Formik to manage a name input. It updates the form state as you type and logs the submitted value when you press submit.

jsx

import React from 'react';
import { useFormik } from 'formik';

export default function SimpleForm() {
  const formik = useFormik({
    initialValues: { name: '' },
    onSubmit: values => {
      alert('Form submitted with name: ' + values.name);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input
        id="name"
        name="name"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.name}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Output

A form with a labeled text input and submit button; submitting shows an alert with the entered name.

Common Pitfalls

Common mistakes when using Formik include:

• Not setting name attribute on inputs, so formik.handleChange can't update values.
• Forgetting to connect onSubmit to the form's onSubmit event.
• Not using formik.values to set input values, causing uncontrolled inputs.
• Trying to use Formik without wrapping inputs properly, leading to no state updates.

Always ensure inputs have name, value, and onChange connected to Formik.

jsx

/* Wrong way: missing name attribute */
<input
  value={formik.values.email}
  onChange={formik.handleChange}
/>

/* Right way: include name attribute */
<input
  name="email"
  value={formik.values.email}
  onChange={formik.handleChange}
/>

Quick Reference

Here is a quick summary of key Formik hooks and props:

Formik Feature	Description
useFormik	Hook to create form state and handlers
initialValues	Object with initial form field values
onSubmit	Function called on form submission
formik.values	Current form field values
formik.handleChange	Updates form values on input change
formik.handleSubmit	Handles form submit event

Key Takeaways

Always use useFormik hook to manage form state and submission in React.

Connect your inputs with name, value, and onChange from Formik.

Pass an onSubmit function to handle form data when the user submits.

Formik simplifies form state management and reduces boilerplate code.

Watch out for missing name attributes on inputs to avoid state update issues.