I have a function that takes some values from another js file. I cannot access the values that stored in the array. The function is:
renderComments(dish)
{
if(dish != null)
return(
<div className = "col-12 col-md-5 m-1">
<h4>Comments</h4>
<ul class="list-unstyled">
<li>
<p>
{dish.comments.comment}
</p>
<span>
{dish.comments.author}
</span>
<span>
{dish.comments.date}
</span>
</li>
</ul>
</div>
);
else
return(
<div></div>
);
}
And the other file is:
export const DISHES =
[
{
id: 0,
name:'Uthappizza',
image: 'assets/images/uthappizza.png',
category: 'mains',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: [
{
id: 0,
rating: 5,
comment: "Imagine all the eatables, living in conFusion!",
author: "John Lemon",
date: "2012-10-16T17:57:28.556094Z"
},
{
id: 1,
rating: 4,
comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author: "Paul McVites",
date: "2014-09-05T17:57:28.556094Z"
}
]
]
I can reach the values like id, name, image etc. but I cannot reach any value in the comments array. How can I reach them? I want to reach all of them and print to screen.