How can I use Formik for managing forms in React?

How can I use Formik for managing forms in React?

Formik is a popular library for handling forms in React. It helps manage form state, validation, and submission.

What are the main features of Formik?

Formik provides features like form state management, validation, error handling, and easy integration with UI libraries.

Can you show me a simple example of using Formik?

Sure! Here's a basic example:

import { Formik, Form, Field } from 'formik';

const MyForm = () => (
  <Formik
    initialValues={{ name: '' }}
    onSubmit={values => { console.log(values); }}
  >
    {() => (
      <Form>
        <Field name="name" placeholder="Enter your name" />
        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
);

This creates a simple form with a single input.

How do I add validation to my Formik form?

You can add validation using the validate prop or by integrating with a validation library like Yup. Here's an example with Yup:

import * as Yup from 'yup';

const validationSchema = Yup.object({
  name: Yup.string().required('Name is required'),
});

<Formik
  initialValues={{ name: '' }}
  validationSchema={validationSchema}
  onSubmit={values => { console.log(values); }}
>
  {/* Form code here */}
</Formik>