How do I use Formik in React?

How do I use Formik in React?

Formik is a popular library for managing forms in React. It helps with form state management, validation, and handling submissions.

Can you show me a basic example of using Formik?

Sure! Here's a simple example:

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

const MyForm = () => {
  return (
    <Formik
      initialValues={{ name: '' }}
      validate={values => {
        const errors = {};
        if (!values.name) {
          errors.name = 'Required';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="text" name="name" />
          <ErrorMessage name="name" component="div" />
          <button type="submit" disabled={isSubmitting}>Submit</button>
        </Form>
      )}
    </Formik>
  );
};

This code creates a simple form with validation.

What are the benefits of using Formik?

Formik simplifies form handling in React by managing state, validation, and submission, making your code cleaner and more maintainable.