How to loop through validation errors from server

Question

I am performing validation on the server with Node.js and sending the response back to the client

try {
  const response = await register(user);
  console.log(response);
} catch (ex) {
  if (ex.response && ex.response.status === 422) {
    const errors = ex.response.data.errors;
    this.setState({ errors });
  }
}

If I console.log(this.state.errors) I get:

(5) [{…}, {…}, {…}, {…}, {…}]
0: {name: "Name required"}
1: {name: "Name should be more than 3 characters"}
2: {email: "Invalid email address"}
3: {password: "Password required"}
4: {password: "Password should be at least 6 characters"}
length: 5
__proto__: Array(0)

I then want to just loop through all the errors and display them one underneath each other.

     {this.state.errors &&
        this.state.errors.map(error => <li>{error}</li>)}

But I get an error that says:

this.state.errors.map is not a function

kind user · Accepted Answer · 2019-11-10 16:33:08Z

2

Apparently sometimes ex.response.data.errors isn't an array, probably an object. I would suggest you to not only check if this.state.errors exist, but also to make sure that it's an array.

{Array.isArray(this.state.errors) &&
    this.state.errors.map(error => <li>{error.name}</li>)}

edited Nov 10, 2019 at 16:33

answered Nov 10, 2019 at 15:57

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user10980228 Over a year ago

Thank you for your answer. When I submit the form after using your code I get this: Error:

Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.

kind user Over a year ago

@user10980228 I've edited my answer. Just replace {error} with {error.name}

user10980228 Over a year ago

Thanks, that works for name. But it doesn't list the email and password errors. Is there no way to just use {error} to list ALL errors without out having to do {error.name}, {error.email} and {error.password}

kind user Over a year ago

@user10980228 You could e.g. unify errors on the API side so it would return array of strings, not array of objects.

Collectives™ on Stack Overflow

How to loop through validation errors from server

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related