无法访问对象内部的属性

Question

In my react app i'm mapping an array like below

{(newdata !== null) ? newdata && newdata.map((item,key) => {
       console.log("item ",item);
         return (
            <div>{item.image_location}</div>
         )
    }
 ):null
}

And my console log looks like this

But cannot object the image_location attribute or any other attributes in the item object. i tried item.image_location but it returns a undefined . How to access the attributes inside my item object

I tried accessing like this

const newkey = parseInt(key)+1; console.log("item ",item.$['place_'+newkey]); 

Still i get a undefined error

LATEST CODE

{(newdata !== null) ? newdata && newdata.map((item, key) => {
                        var newkey = parseInt(key) + 1;
                        console.log("item ", item['place_' + newkey]);
                        return (

                            <Row noGutters className="container_one polaroid unchange_div" key={key}>

                                <Col xs={4} className="attraction_container">
                                    <img src={item.image_location} alt="img"
                                         className="attraction_img"/>
                                </Col>

                            </Row>
                        )
                    }) : (countrydata === null && loading === false) ?
                        <div className="horiz_center"><span className="nodata_lbl">No data</span>
                        </div> : null
                    }

Answer 1

In the log, you can clearly see that, the image_location attribute is wrapped inside place_1 attribute. So, you have to access it like item.place_1.image_location

Update

{(newdata !== null) ? newdata && Object.keys(newdata).sort((a,b) => parseInt(a.split('_')[1]) - parseInt(b.split('_')[1])).forEach((key) => {
    console.log("item ", newdata[key]);
    return (
      <Row noGutters className="container_one polaroid unchange_div" key={key}>
        <Col xs={4} className="attraction_container">
          <img src={newdata[key].image_location} alt="img" className="attraction_img"/>
        </Col>
      </Row>
    )
  }) : (countrydata === null && loading === false) ? 
      <div className="horiz_center"><span className="nodata_lbl">No data</span>
    </div> : null
}