formik and yup

1import React from 'react';
2 import { Formik, Field, Form, ErrorMessage } from 'formik';
3 import * as Yup from 'yup';
4 
5 const SignupForm = () => {
6   return (
7     <Formik
8       initialValues={{ firstName: '', lastName: '', email: '' }}
9       validationSchema={Yup.object({
10         firstName: Yup.string()
11           .max(15, 'Must be 15 characters or less')
12           .required('Required'),
13         lastName: Yup.string()
14           .max(20, 'Must be 20 characters or less')
15           .required('Required'),
16         email: Yup.string().email('Invalid email address').required('Required'),
17       })}
18       onSubmit={(values, { setSubmitting }) => {
19         setTimeout(() => {
20           alert(JSON.stringify(values, null, 2));
21           setSubmitting(false);
22         }, 400);
23       }}
24     >
25       <Form>
26         <label htmlFor="firstName">First Name</label>
27         <Field name="firstName" type="text" />
28         <ErrorMessage name="firstName" />
29         <label htmlFor="lastName">Last Name</label>
30         <Field name="lastName" type="text" />
31         <ErrorMessage name="lastName" />
32         <label htmlFor="email">Email Address</label>
33         <Field name="email" type="email" />
34         <ErrorMessage name="email" />
35         <button type="submit">Submit</button>
36       </Form>
37     </Formik>
38   );
39 };
40
41export default SignupForm;