Search code examples
reactjsreact-google-maps

Cannot read property 'category' of null within return in reactjs

I'm getting some data from a json file and with .map putting those points on a google maps in reactjs, all fine. But some of the items in the object don't have any values and if they get called they throw a: 'TypeError: Cannot read property 'category' of null'. Shouldn't I just be able to do something like the following in the return:

{ marker.outcome_status.category && <p>Outcome: {marker.outcome_status.category} ({marker.outcome_status.date})</p> }
Solution

  • Since you have 2 nested levels you need to check there is marker.outcome_status as well.

    { 
  marker.outcome_status
  && marker.outcome_status.category
  && <p>Outcome: {marker.outcome_status.category} ({marker.outcome_status.date})</p> }