React - Accessing nested objects in returned data

Question

I'm using fetch to return some data from a local API. I'm able to return the data and set the state. However, in my render() function when using map and attempting to access anything deeper than the top level object in the data I get an undefined error. I can correctly log any level of the data that I want to the console, but I don't have access to it within the rendered component.

constructor(props) {
  super(props);
  this.state ={
    verifications: []
  }
}

componentWillMount(){
  fetch('http://localhost:3001/verifications')
    .then(response => response.json())
    .then((verifications) => {
      this.setState({verifications})
      console.log(this.state);
    });
}

and in my render

{this.state.verifications.map(verification =>
  <div key={verification._id}>
    <ReviewListItem
      hasAvatar={true}
      imageUrl={verification.supplier.logo}
      title={verification.supplier.companyName}
      description={verification.tasks.length}
    />
  </div>
)}

This is the error I get: Unhandled Rejection (TypeError): Cannot read property 'logo' of null

I've searched high and low for an answer to this, but I feel like I must be approaching this wrong. I come from Angular 1, and I'm extremely new to React. Maybe I'm having a hard time grasping the concepts.

Here's my data:

[
{
"_id": 1000,
"supplier": {
"_id": 1000,
"companyName": "ACME Business Ventures",
"logo": "/images/logos/suppliers/acme.jpg",
"avettaId": "ADS83J",
"brandColor": "#563E5E",
"clients": [],
"locations": [],
"primaryContact": {},
"address": {},
"createdAt": "2017-06-30T17:42:23.479Z"
},
"tasks": [
{
"form": "PQF General",
"question": "How long have you been in business?",
"answer": "18 Years",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "PQF General",
"question": "Have you had any fatalities in the last 3 years?",
"answer": "No",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "Diversity Questionnaire",
"question": "Are you a minority-owned business?",
"answer": "Yes",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "Sustainability Questionnaire",
"question": "What percentage of your business runs on renewable energy?",
"answer": "About 55%, but that's expected to climb to 80% by next year.",
"status": "incomplete",
"attachment": "",
"comments": []
}
]
},
{
"_id": 2000,
"supplier": null,
"tasks": [
{
"form": "PQF General",
"question": "How long have you been in business?",
"answer": "18 Years",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "PQF General",
"question": "Have you had any fatalities in the last 3 years?",
"answer": "No",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "Diversity Questionnaire",
"question": "Are you a minority-owned business?",
"answer": "Yes",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "Sustainability Questionnaire",
"question": "What percentage of your business runs on renewable energy?",
"answer": "About 55%, but that's expected to climb to 80% by next year.",
"status": "incomplete",
"attachment": "",
"comments": []
}
]
},
{
"_id": 3000,
"supplier": null,
"tasks": [
{
"form": "PQF General",
"question": "How long have you been in business?",
"answer": "18 Years",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "PQF General",
"question": "Have you had any fatalities in the last 3 years?",
"answer": "No",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "Diversity Questionnaire",
"question": "Are you a minority-owned business?",
"answer": "Yes",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "Sustainability Questionnaire",
"question": "What percentage of your business runs on renewable energy?",
"answer": "About 55%, but that's expected to climb to 80% by next year.",
"status": "incomplete",
"attachment": "",
"comments": []
}
]
},
{
"_id": 4000,
"supplier": null,
"tasks": [
{
"form": "PQF General",
"question": "How long have you been in business?",
"answer": "18 Years",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "PQF General",
"question": "Have you had any fatalities in the last 3 years?",
"answer": "No",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "Diversity Questionnaire",
"question": "Are you a minority-owned business?",
"answer": "Yes",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "Sustainability Questionnaire",
"question": "What percentage of your business runs on renewable energy?",
"answer": "About 55%, but that's expected to climb to 80% by next year.",
"status": "incomplete",
"attachment": "",
"comments": []
}
]
}
]

verification.supplier is a number, not an object. it doesnt look like those fields you are trying to access exist anywhere in the data — pizzarob
– pizzarob, Commented Jul 7, 2017 at 20:28
Ah crap... whoops. Posted my seed file. Edited to show the actual data. — daveyholler
– daveyholler, Commented Jul 7, 2017 at 20:32

Sassan · Accepted Answer · 2017-07-07 20:36:51Z

5

One of your suppliers is null (at least one). Consider using something like imageUrl={verification.supplier ? verification.supplier.logo : null} instead of imageUrl={verification.supplier.logo}.

answered Jul 7, 2017 at 20:36

Sassan

2,3673 gold badges26 silver badges47 bronze badges

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

2 Comments

daveyholler Over a year ago

Well... crap. :-( Pardon me while I go pout in the corner. That's ridiculous. I guess it pays to look at the entire object first. I never made it past the first one and just assumed that the rest were there. Thanks for the help everyone!

Sassan Over a year ago

Similar things happened to me a lot.

pizzarob · Accepted Answer · 2017-07-07 20:39:19Z

2

The second index of your array has supplier: null. You can check that supplier exists first

{this.state.verifications.map(verification =>
  <div key={verification._id}>
    <ReviewListItem
      hasAvatar={true}
      imageUrl={verification.supplier && verification.supplier.logo}
      title={verification.supplier && verification.supplier.companyName}
      description={verification.tasks.length}
    />
  </div>
)}

answered Jul 7, 2017 at 20:39

pizzarob

12.1k7 gold badges51 silver badges70 bronze badges

Comments

Dmitry Sokurenko · Accepted Answer · 2017-07-07 20:39:40Z

2

The supplier is clearly null in your json snippet:

"supplier": null,

Thus it obviously fails :)

I believe angular automatically checks for nulls in expressions like this: foo.bar.baz.something.deeply.nested — so if anything is null the result will be null — in react, (and in js in general)‚ you need to check for nulls by yourself.

answered Jul 7, 2017 at 20:39

Dmitry Sokurenko

6,1324 gold badges34 silver badges54 bronze badges

Collectives™ on Stack Overflow

React - Accessing nested objects in returned data

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related