How can i display errors in react ; i am getting the array errors from redux?

Question

this my redux array that i get from a backend node js api

errors:
errors: Array(1)
0: {location: "body", param: "name", value: "mamadou bah transfert", msg: "ce nom est déja utilisé"}
length: 1

And in React Iam triying to show the errors like this

<div class="col m12">
  {this.props.offices.errors.errors?
  <span className="center-align red-text">
   {this.props.offices.errors.errors.map((error,i) => <p key={i}>       {error.param=='name'?error.msg:''}</p>) 
      </span> : '' }
</div>

this is the errors that i get always

react-errors

do `console.log(this.props.offices)` and write output here. Then I can help you as i need to see a structure of your object/list. — sbqq, Dec 01 '18 at 14:51
The code in your error doesn't match the code in your question. `this.props.offices.errors ? ` vs `this.props.offices.errors.errors ? `. — Andy, Dec 01 '18 at 14:53

kind user · Answer 1 · 2018-12-01T14:58:28.760

0

Since the errors comes from an asynchro request, you should secure the case that the object doesn't exist yet.

this.props.offices && this.props.offices.errors.errors.map(...)

However to be 100% sure that it won't fail, I would use a defualt value of offices and also check if the errors exists and it's an iterable array.

const { offices = {} } = this.props;

offices.errors && Array.isArray(offices.errors.errors) && offices.errors.errors.map(...);

edited Dec 01 '18 at 14:58

answered Dec 01 '18 at 14:54

kind user

40,029
7
67
77

1

that can be the point :) – sbqq Dec 01 '18 at 14:54

Hemadri Dasari · Answer 2 · 2018-12-02T03:50:53.317

Try with this

The point is that when you want to access nested objects, you need to first check whether the nested object really exist and then access it like using below conditional check in your case

  <div class="col m12">
        {this.props.offices && this.props.offices.errors && this.props.offices.errors.errors?
           <span className="center-align red-text">
        {this.props.offices.errors.errors.map((error,i) => <p key={"Key-"+i}>       {error.param=='name'?error.msg:''}</p>) 
           </span> : '' }
   </div>

How can i display errors in react ; i am getting the array errors from redux?

2 Answers2