CODEWITHSUNDEEP
reactjsvalidationformik
a7dc
a7dc

Reputation: 3416

<ErrorMessage /> doesn't work despite function call

I'm using Formik to build a simple form.

In my validation method I'm checking to see if a name has been entered into the field. If it has not, then I print into the console - which is working fine. 

validate={values => {
  let errors = [];

  if (!values.name) {
    console.log("no name entered");
    errors.name = "First name required";
  }

  //check if my values have errors
  return errors;
}}

However, the <ErrorMessage /> component does nothing when the above condition is met:

  <Field
    type="text"
    name="name"
    placeholder="First Name"
  />
  <ErrorMessage name="name" />

Why is this?

Codesandbox

Upvotes: 2

Views: 39

Answers (1)

weilandia
weilandia

Reputation: 577

The issue is that you have let errors = []; instead of let errors = {};.

Upvotes: 3

Related Questions