How to map specific items within react when using json object - json

Question

I have a json object that I'm trying to map into a table within a react component. I'm having difficulty accessing the 'title' and the 'tooltip' from within the json object. The console log successfully shows me the entire the json object, but
this.props.selectedProducts.products.title
Which I thought would map to the 'title' part of the json data simply doesn't work. Can anyone tell me what I'm doing wrong & possibly how to correct it? Thanks in advance!
JSON:
selectedProducts: [
{
“start”: “Tue Jun 19 16:55:40 BST 2018”,
“products”: [
{
“title”: “SL Primary - Alaska (Westlaw PRO™)“,
“price”: “”
},
{
“title”: “SL Ninth Circuit Primary Law (Westlaw PRO™)“,
“price”: “”
}
]
}
],
React:
renderProducts() {
const selected = this.props.selectedProducts;
return this.props.selectedProducts.map((selected, i) => {
return (
<tr className="product-cells" key={i}>
<td> {selected.title} </td>
<td> {selected.price}</td>
</tr>
);
});
}

Answer 1

selectedProducts is an array, so you have to access the first object in the array, and map over products:
renderProducts() {
return this.props.selectedProducts[0].products.map((selected, i) => {
return (
<tr className="product-cells" key={i}>
<td> {selected.title} </td>
<td> {selected.price}</td>
</tr>
);
});
}

Answer 2

You should use first element of your selectedProducts array as answered before or use a second map if there will be more objects:
renderProducts() {
return (
this.props.selectedProducts.map(el =>
el.products.map(selected =>
<tr className="product-cells" key={selected.title}>
<td> {selected.title} </td>
<td> {selected.price}</td>
</tr>)
)
)
}
Do not use indexes as your keys. There could be some problems if you do so.