无法从React组件访问嵌套的JSON数据

Question

I have a map function that renders JSON data retrieved like this:

  <div className="items">
    {items.map(item =>
        <Card key={item.id} price={item.title} />)}
  </div>

It successfully iterates over and renders data from un-nested properties, but I am having trouble getting it to render the USD nested prop as shown here:

     "price":{  
        "amounts":{  
           "GBP":"£8,185",
           "USD":"$12,000",
           "EUR":"€10.755"
        },

I am trying to extract it like this:

  <div className="items">
    {items.map(item =>
        <Card key={item.id} price={item.price.amounts.USD} />)}
  </div>

And the error message I'm getting is "TypeError: Cannot read property 'amounts' of null." I have also tried with square brackets to no success.

Answer 1

As you mentioned in comments, some of the price values are null (all the item doesn't contains the price object), thats why it is throwing error:

Cannot read property 'amounts' of null.

Solution is, put the check before accessing the amount property, Like this:

price={item.price? (item.price.amounts||{}).USD||0 : 0}

Answer 2

Although the answer above is 100% correct (and recommended) I would consider using _.get if you are already using lodash:

import get from 'lodash/get'

// in render
// the third argument is the default price is *any* of the path is not defined
price={ get(item, 'price.amounts.USD', 0) }

For me, the pathing system in lodash (get, has, set) are extremely expressive and result in much more readable code. If you are importing just get (using the above import, instead of import { get } from lodash ) the size footprint is also quite small.

Update:

An interesting comment by @SimianAngel - 100% correct regarding the default value. 0 is probably not what you want as a default value! Depending on your business logic of course.

Again leveraging the path methods of lodash, creating something readable and expressive is quite simple:

import get from 'lodash/get'
import has from 'lodash/has'

// in render
<div>
  {has(item, 'price.amounts.USD')) 
    ? <Card key={item.id} price={get(item, 'price.amounts.USD'} />
    : <div>This item isn't available in this region</div>
  }
</div>