Reading nested array and display items using React

Question

I was unable to populate the

with the correct array information. This is now working with the fix below.

Here is the corrected file.

renderComments(){
  if (this.props.selectedDish != null) {
    const commentList = this.props.selectedDish.comments;
     return (
        <div>
          <h4>Comments</h4>
          {commentList.map((comment) => {
            return (
              <ul className="list-unstyled" >
                <li>
                  <p>{comment.comment}</p> 
                  <p> -- {comment.author}{" "}
                  {Intl.DateTimeFormat("en-US",{
                  month: "short",
                  day: "2-digit",
                  year: "numeric"}).format(new Date(comment.date))}
                  </p>
                </li>
              </ul>
            );
          })};
        </div>  
     );
  } else {
    return (
      <div></div>
    );
  }
}

Thank you sava128

score 1 · Accepted Answer · 2021-04-28 18:43:35Z

1

You should assign comments like you did with dish.name and dish.description try:

renderComments() {
  const dish = this.props.selectedDish;
  if (dish) {
    const commentList = dish.comments;
    console.log("test2", commentList);
    return (
      <div>
        <h4>Comments</h4>
        <ul className="list-unstyled">
          {commentList.map((comment) => {
            return (
              // list items here
            )
          })}
        </ul>
      </div>
    );
  } // else here
}

edited Apr 28, 2021 at 18:43

answered Apr 28, 2021 at 17:59

user15672038

Sign up to request clarification or add additional context in comments.

9 Comments

Flexxall Over a year ago

I added the .comments to the const commentList = ... and i get error TypeError: Cannot read property 'comments' of undefined

user15672038 Over a year ago

What does Object.entries(this.props.selectedDish) returns? @Flexxall

Flexxall Over a year ago

"(8) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)] 0: (2) ["id", 3] 1: (2) ["name", "ElaiCheese Cake"] 2: (2) ["image", "assets/images/elaicheesecake.png"] 3: (2) ["category", "dessert"] 4: (2) ["label", ""] 5: (2) ["price", "2.99"] 6: (2) ["description", "A delectable, semi-sweet New York Style Cheese Cak…am cracker crust and spiced with Indian cardamoms"] 7: (2) ["comments", Array(5)] length: 8 proto: Array(0)"

user15672038 Over a year ago

I've modified the answer a bit, try that.

Flexxall Over a year ago

That is getting further. It is displaying the info like comment.author will show author for all 5 comments can i place a function in there to loop through them to separate them out

|

Collectives™ on Stack Overflow

Reading nested array and display items using React

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related