0

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.

hael
  • 49
  • 1
  • 7
  • https://reactjs.org/docs/lists-and-keys.html – str Nov 26 '20 at 19:25
  • this is how I would do it https://codepen.io/castillojuan1000/pen/xxExLyZ?editors=1111 or you could use Destructuring https://medium.com/better-programming/6-amazing-javascript-destructuring-tricks-d47da9a0047f – JCastillo Nov 26 '20 at 19:37

0 Answers0