<ErrorMessage />

<ErrorMessage /> is a component that renders the error message of a given field if that field has been visited (i.e.touched[name] === true) (and there is an error message present). It expects that all error messages are stored for a given field as a string. Like <Field />, <FastField />, and <FieldArray />, lodash-like dot path and bracket syntax is supported.

Example

1 import React from 'react';
2 import { Formik, Form, Field, ErrorMessage } from 'formik';
3 import * as Yup from "yup";
4 
5 const SignupSchema = Yup.object().shape({
6   name: Yup.string()
7     .min(2, 'Too Short!')
8     .max(70, 'Too Long!')
9     .required('Required'),
10   email: Yup.string()
11     .email('Invalid email')
12     .required('Required'),
13 });
14 
15 export const ValidationSchemaExample = () => (
16   <div>
17     <h1>Signup</h1>
18     <Formik
19       initialValues={{
20         name: '',
21         email: '',
22       }}
23       validationSchema={SignupSchema}
24       onSubmit={values => {
25         // same shape as initial values
26         console.log(values);
27       }}
28     >
29       {({ errors, touched }) => (
30         <Form>
31           <Field name="name"  />
32 -           {errors.name && touched.name ? (
33 -            <div>{errors.name}</div>
34 -          ) : null}
35 +         <ErrorMessage name="name" />
36           <Field name="email" type="email" />
37 -           {errors.email && touched.email ? (
38 -            <div>{errors.email}</div>
39 -          ) : null}
40 +         <ErrorMessage name="email" />
41           <button type="submit">Submit</button>
42         </Form>
43       )}
44     </Formik>
45   </div>
46 );

Props

Reference

Props

children

children?: ((message: string) => React.ReactNode)

A function that returns a valid React element. Will only be called when the field has been touched and an error exists.

1 // the render callback will only be called when the
2 // field has been touched and an error exists and subsequent updates.
3 <ErrorMessage name="email">{(msg) => <div>{msg}</div>}</ErrorMessage>

component

component?: string | React.ComponentType<FieldProps>

Either a React component or the name of an HTML element to render. If not specified, <ErrorMessage> will just return a string.

1 <ErrorMessage component="div" name="email" />
2 // --> {touched.email && error.email ? <div>{error.email}</div> : null}
3 
4 <ErrorMessage component="span" name="email" />
5 // --> {touched.email && error.email ? <span>{error.email}</span> : null}
6 
7 <ErrorMessage component={Custom} name="email" />
8 // --> {touched.email && error.email ? <Custom>{error.email}</Custom> : null}
9 
10 <ErrorMessage name="email" />
11 // This will return a string. React 16+.
12 // --> {touched.email && error.email ? error.email : null}

name

name: string Required

A field's name in Formik state. To access nested objects or arrays, name can also accept lodash-like dot path like social.facebook or friends[0].firstName

render

render?: (error: string) => React.ReactNode

A function that returns a valid React element. Will only be called when the field has been touched and an error exists.

1 // the render callback will only be called when the
2 // field has been touched and an error exists and subsequent updates.
3 <ErrorMessage name="email" render={(msg) => <div>{msg}</div>} />