Home/ Questions/Q 460
Next
In Process

DevzConnect Latest Questions

nicko
  • 0
  • 0
Beginner
Asked: 2025-02-20T01:49:02+00:00 In:

How do you manage forms with Formik?

  • 0
  • 0

An explanation of form management with Formik.

beginnerinterviewquestionsreactreactjs
Share
Leave an answer

Leave an answer

Browse

1 Answer

  1. blissy38
    Beginner

    Managing Forms with Formik in React (Beginner-Friendly) 🚀📋

    Formik makes handling forms in React super easy by managing form state, validation, and submission for you. Let’s go step-by-step! 🛠️

    1️⃣ Install Formik:

    npm install formik

    2️⃣ Basic Form Example with Formik: 📝

    We’ll build a simple login form with email and password fields.

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

const LoginForm = () => {
return (
<Formik
initialValues={{ email: "", password: "" }} // Step 1: Initial form values
onSubmit={(values) => { // Step 2: Handle form submission
console.log("Form Data:", values);
}}
validate={(values) => { // Step 3: Simple validation
const errors = {};
if (!values.email) {
errors.email = "Email is required";
}
if (!values.password) {
errors.password = "Password is required";
}
return errors;
}}
>
{() => (
<Form>
<div>
<label>Email:</label>
<Field type="email" name="email" /> {/* Controlled input */}
<ErrorMessage name="email" component="div" style={{ color: "red" }} />
</div>

<div>
<label>Password:</label>
<Field type="password" name="password" />
<ErrorMessage name="password" component="div" style={{ color: "red" }} />
</div>

<button type="submit">Login</button>

</Form>
)}
</Formik>

 );

};

export default LoginForm;

    3️⃣ Key Concepts Explained: 💡

    1. Formik Component:

      • Wraps your form and manages the state and validation.
      • Props:
        • initialValues — starting values for your fields.
        • onSubmit — function called when the form is submitted.
        • validate — simple function to validate inputs.

    2. Field Component:

      • A Formik-controlled input (like <input />).
      • Automatically connects the field to Formik’s state.

    3. ErrorMessage Component:

      • Shows validation errors for a field.

    4. Form Component:

      • Replaces the normal <form> tag and connects it to Formik.

    4️⃣ Adding Validation with Yup (Optional but Powerful) ✅

    Formik works well with Yup, a schema validation library, for more complex forms.

    Install Yup:

    npm install yup

    Example with Yup Validation:

    import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";

const LoginForm = () => {
const validationSchema = Yup.object({
email: Yup.string().email("Invalid email").required("Email is required"),
password: Yup.string().min(6, "Must be at least 6 characters").required("Password is required"),
});

return (

<Formik
initialValues={{ email: "", password: "" }}
validationSchema={validationSchema} // <-- Using Yup for validation
onSubmit={(values) => {
console.log("Form Data:", values);
}}
>
<Form>
<div>
<label>Email:</label>
<Field type="email" name="email" />
<ErrorMessage name="email" component="div" style={{ color: "red" }} />
</div>

<div>

<label>Password:</label>
<Field type="password" name="password" />
<ErrorMessage name="password" component="div" style={{ color: "red" }} />
</div>

<button type="submit">Login</button>

</Form>
</Formik>
);
};
export default LoginForm;

    5️⃣ Bonus: Handling Form Submission State 🔄

    Formik provides helpful props like isSubmitting to manage submission state.

    <Formik
initialValues={{ email: "", password: "" }}
onSubmit={(values, { setSubmitting, resetForm }) => {
setTimeout(() => {
console.log("Submitted:", values);
setSubmitting(false); // Stop loading state
resetForm(); // Reset form after submission
}, 2000); // Simulate API call
}}
>
{({ isSubmitting }) => (
<Form>
<Field type="email" name="email" />
<ErrorMessage name="email" component="div" />

<Field type="password" name="password" />
<ErrorMessage name="password" component="div" />

<button type="submit" disabled={isSubmitting}>

{isSubmitting ? "Submitting..." : "Login"}
</button>
</Form>

)}
</Formik>

    6️⃣ Why Use Formik? 🚀

    • 🛠️ Manages form state (values, errors, touched fields).
    • 🔄 Simplifies validation (works well with Yup).
    • 📋 Handles submission with built-in helpers.
    • 💡 Less boilerplate code compared to vanilla React forms.