How to use Formik & Yup in your React app?

Formik and Yup are popular libraries in the React ecosystem that simplify form handling and validation. Here's a step-by-step guide on how to use Formik and Yup in your React app:

1. Install Dependencies: Make sure you have Formik and Yup installed in your project.

   npm install formik yup

1. Create a Form Component: Create a new React component for your form. For example, LoginForm.js.

   // LoginForm.js
   import React from 'react';
   import { Formik, Form, Field, ErrorMessage } from 'formik';
   import * as Yup from 'yup';

   const LoginForm = () => {
     return (
       <Formik
         initialValues={{
           email: '',
           password: '',
         }}
         validationSchema={Yup.object({
           email: Yup.string().email('Invalid email address').required('Required'),
           password: Yup.string().required('Required'),
         })}
         onSubmit={(values, { setSubmitting }) => {
           // Handle form submission logic here
           console.log(values);
           setSubmitting(false);
         }}
       >
         <Form>
           <label htmlFor="email">Email</label>
           <Field type="email" name="email" />
           <ErrorMessage name="email" component="div" />

           <label htmlFor="password">Password</label>
           <Field type="password" name="password" />
           <ErrorMessage name="password" component="div" />

           <button type="submit">Submit</button>
         </Form>
       </Formik>
     );
   };

   export default LoginForm;

1. Explanation:

   • Formik: The main wrapper component for managing the form state and handling form submission.
   • Form: The HTML form element that wraps your form fields.
   • Field: Represents a form input field, and you can use it for various input types (text, password, email, etc.).
   • ErrorMessage: Displays validation errors for a specific field.

2. Validation with Yup:

   • The validationSchema prop in Formik is used to define the validation rules using Yup.
   • In the example, we defined rules for the email and password fields using the Yup.string() schema methods.

3. Handle Form Submission:

   • The onSubmit prop in Formik is a function that will be called when the form is submitted.
   • You can handle your form submission logic inside this function.

4. Usage:
   Import and use the LoginForm component in your main application file (e.g., App.js).
   

   // App.js
   import React from 'react';
   import LoginForm from './LoginForm';

   const App = () => {
     return (
       <div>
         <h1>Login Form</h1>
         <LoginForm />
       </div>
     );
   };

   export default App;

Now, you have a basic form with validation using Formik and Yup in your React app. Customize the form structure and validation rules according to your specific requirements.

If you enjoy my content and would like to support my work, you can buy me a coffee. Your support is greatly appreciated!

Disclaimer: This content has been generated by AI.