To show nested forms using Formik, you can utilize the FieldArray component provided by Formik. The FieldArray component allows you to work with arrays of form fields and provides a convenient way to render and manage nested forms.

Here's a step-by-step guide to showing nested forms using Formik and FieldArray:

  1. Install Dependencies: Make sure you have installed Formik and Yup (for form validation) in your project.

    npm install formik yup # or yarn add formik yup
  2. Import Required Modules: Import the necessary modules from Formik and Yup in your component.

    import React from 'react'; import { Formik, Form, Field, FieldArray } from 'formik'; import * as Yup from 'yup';
  3. Create Form Schema: Define the validation schema for your form using Yup. This step is optional but recommended for data validation.

    const validationSchema = Yup.object().shape({ // Define your validation schema here });
  4. Render the Form: Use the Formik component to wrap your form and define the initial form values and form submission logic.

    const initialValues = { // Define your initial form values here }; const handleSubmit = (values) => { // Handle form submission here }; const MyForm = () => { return ( <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit} > {({ values }) => ( <Form> {/* Render your form fields and nested form using Field and FieldArray */} </Form> )} </Formik> ); };
  5. Use Field and FieldArray Components: Within the Form component, use the Field component for regular form fields and the FieldArray component to handle nested forms.

    const MyForm = () => { return ( <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit} > {({ values }) => ( <Form> {/* Regular form field */} <label htmlFor="name">Name:</label> <Field type="text" name="name" id="name" /> {/* Nested form using FieldArray */} <FieldArray name="friends"> {({ push, remove }) => ( <div> {, index) => ( <div key={index}> {/* Nested form fields */} <label htmlFor={`friends.${index}.name`}>Friend's Name:</label> <Field type="text" name={`friends.${index}.name`} id={`friends.${index}.name`} /> {/* Button to remove the nested form */} <button type="button" onClick={() => remove(index)}> Remove Friend </button> </div> ))} {/* Button to add a new nested form */} <button type="button" onClick={() => push({ name: '' })}> Add Friend </button> </div> )} </FieldArray> {/* Submit button */} <button type="submit">Submit</button> </Form> )} </Formik> ); };

    In this example, we have a form with a regular form field for the user's name and a nested form for entering their friends' names. The FieldArray component is used to handle the array of friends, and the push and remove methods are used to add or remove friends dynamically.

By using the FieldArray component in Formik, you can easily manage nested forms within your main form and handle arrays of form fields more effectively.

Have questions or queries?
Get in Touch