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

Upvotes: 0

Views: 57

Answer 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
}