ReactJs Formik

Syntax

Formik is a form library for React. It helps to handle form state, validation, and submission in an easy and efficient way. To use Formik, first, we need to install it using npm or yarn.

npm install formik

yarn add formik

Once you have installed the package, you can import it in your React component as follows.

import { Formik } from 'formik';

You can use Formik like any other React component.

Example

Here is a simple example of how to use Formik to create a form with one input field.

import { Formik } from 'formik';

const ExampleForm = () => {
  return (
    <Formik
      initialValues={{ name: '' }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          setSubmitting(false);
          alert(JSON.stringify(values, null, 2));
        }, 400);
      }}
    >
      {({
        values,
        handleChange,
        handleBlur,
        handleSubmit,
        isSubmitting,
      }) => (
        <form onSubmit={handleSubmit}>
          <label>
            Name:
            <input
              type="text"
              name="name"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.name}
            />
          </label>
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </form>
      )}
    </Formik>
  );
};

export default ExampleForm;

In this example, we have defined a form with one input field for the name. We have also defined the initialValues of the form, which is an object containing the initial values of the form fields. We have also defined an onSubmit function that is called when the form is submitted.

Output

When you run the example, you will see a form with one input field for the name. When you enter the name and click the Submit button, you will see an alert with the JSON representation of the form values.

Explanation

Formik helps to handle the following tasks related to forms:

• Form state management
• Form validation
• Form submission

Form state management is the process of keeping track of the state of the form fields. Formik provides a state management mechanism that allows you to define the initial values of the form fields and also update them when the user interacts with the form fields. This mechanism is based on React's useState hook.

Form validation is the process of validating the user input. Formik makes it easy to define validation rules for form fields using the yup library. Yup is a JavaScript schema validation library that allows you to define validation rules for objects.

Form submission is the process of sending the form data to the server. Formik provides an onSubmit function that is called when the form is submitted. You can use this function to perform any necessary actions, such as sending the form data to the server, displaying a message to the user, etc.

Use

Formik is used to create forms in React applications. It simplifies the process of handling form state, validation, and submission by providing an easy-to-use and efficient mechanism.

To use Formik, you need to define the initial values of the form fields using the initialValues prop. You also need to define the validation rules for the form fields using the yup library. Finally, you need to define the onSubmit function that is called when the form is submitted.

When the user interacts with the form, Formik updates the state of the form fields and performs validation according to the validation rules. If there are any validation errors, Formik displays error messages for the corresponding form fields.

Once the form is submitted, Formik calls the onSubmit function, which allows you to perform any necessary actions, such as sending the form data to the server.

Important Points

• Formik is a form library for React that provides easy form state management, validation, and submission.
• Formik simplifies the process of creating forms in React applications by providing an easy-to-use and efficient mechanism.
• To use Formik, you need to define the initial values of the form fields, validation rules, and the onSubmit function.
• Formik updates the state of the form fields and performs validation according to the validation rules when the user interacts with the form.
• Formik displays error messages for the corresponding form fields if there are any validation errors.
• Formik calls the onSubmit function when the form is submitted, allowing you to perform any necessary actions.

Summary

Formik is a form library for React that simplifies the process of creating forms in React applications by providing an easy-to-use and efficient mechanism for form state management, validation, and submission. It is a powerful tool that can help you create complex forms with ease.