Step 3: Creating the Form Component

In our app, we will create a form component called Form.jsx. Let's start by setting up the basic structure of our component.

import React from 'react';

const Form = () => {

  return (
    <div>Form markup</div>
  )
}

export default Form;

Code explanation: The Form component is a functional component that will serve as our custom form component. It currently renders a placeholder <div> for the form markup, which we'll fill in later.

Step 4: Setting up Formik

We will use the useFormik hook to initialize Formik and handle form-related functionality inside the Form component. This is where the process differs from the standard useState approach. Let's add the necessary code to set up Formik.

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

const Form = () => {
  const formik = useFormik({
    initialValues: {
      // Specify initial values for form fields
    },
    onSubmit: (values) => {
      // Handle form submission
    },
    validate: (values) => {
      // Perform form field validation
    }
  });

  return <div>Form markup</div>;
};

export default Form;

Code explanation:

• Line 2: useFormik is a hook imported from the formik package. It allows us to create a Formik instance to handle form-related functionality.
• Line 5: The formik constant stores the return value of useFormik, which provides properties and methods for managing form state, field values, validation, and submission.
• Line 6-8: initialValues represents the initial values of the form fields. We can specify an object with keys corresponding to field names and values representing the initial values.
• Line 9-11: onSubmit is a callback function that will be executed when the form is submitted. We can define this function separately to handle the form submission and perform actions like making API calls or updating the application's state.
• Line 12-14: validate (optional) is a validation function used to validate the form fields. This function will be called during form submission or field changes. We can define our validation logic within this function and return an object with errors corresponding to the failed validation fields.

Note

In these steps, we learned how to create a custom form component using Formik in a React app.

Complete code