import React from 'react';

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

3 import * as Yup from 'yup';

4 

5 const SignupSchema = Yup.object().shape({

6   firstName: Yup.string()

7     .min(2, 'Too Short!')

8     .max(50, 'Too Long!')

9     .required('Required'),

10   lastName: Yup.string()

11     .min(2, 'Too Short!')

12     .max(50, 'Too Long!')

13     .required('Required'),

14   email: Yup.string().email('Invalid email').required('Required'),

15 });

16 

17 export const ValidationSchemaExample = () => (

18   <div>

19     <h1>Signup</h1>

20     <Formik

21       initialValues={{

22         firstName: '',

23         lastName: '',

24         email: '',

25       }}

26       validationSchema={SignupSchema}

27       onSubmit={values => {

28         // same shape as initial values

29         console.log(values);

30       }}

31     >

32       {({ errors, touched }) => (

33         <Form>

34           <Field name="firstName" />

35           {errors.firstName && touched.firstName ? (

36             <div>{errors.firstName}</div>

37           ) : null}

38           <Field name="lastName" />

39           {errors.lastName && touched.lastName ? (

40             <div>{errors.lastName}</div>

41           ) : null}

42           <Field name="email" type="email" />

43           {errors.email && touched.email ? <div>{errors.email}</div> : null}

44           <button type="submit">Submit</button>

45         </Form>

46       )}

47     </Formik>

48   </div>

49 );