formik docs
// Render Prop
2 import React from 'react';
3 import { Formik, Form, Field, ErrorMessage } from 'formik';
4
5 const Basic = () => (
6 <div>
7 <h1>Any place in your app!</h1>
8 <Formik
9 initialValues={{ email: '', password: '' }}
10 validate={values => {
11 const errors = {};
12 if (!values.email) {
13 errors.email = 'Required';
14 } else if (
15 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$/i.test(values.email)
16 ) {
17 errors.email = 'Invalid email address';
18 }
19 return errors;
20 }}
21 onSubmit={(values, { setSubmitting }) => {
22 setTimeout(() => {
23 alert(JSON.stringify(values, null, 2));
24 setSubmitting(false);
25 }, 400);
26 }}
27 >
28 {({ isSubmitting }) => (
29 <Form>
30 <Field type="email" name="email" />
31 <ErrorMessage name="email" component="div" />
32 <Field type="password" name="password" />
33 <ErrorMessage name="password" component="div" />
34 <button type="submit" disabled={isSubmitting}>
35 Submit
36 </button>
37 </Form>
38 )}
39 </Formik>
40 </div>
41 );
42
43 export default Basic;