How do I implement Formik in a React app?

How do I implement Formik in a React app?

To implement Formik in a React app, first install Formik using npm or yarn. Then, create a form component using Formik's useFormik hook.

Can you show me a simple example of a form using Formik?

Sure! Here's a basic example:

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

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      email: '',
    },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

This creates a simple form with an email input.

What are some common validation techniques with Formik?

Common validation techniques include using the validate function to check values, or integrating with libraries like Yup for schema-based validation.

Can Formik handle complex forms with nested fields?

Yes, Formik can handle complex forms with nested fields by using the Field component and managing state accordingly.