Flexxall
Flexxall

Reputation: 33

Reading nested array and display items using React

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

  • Answers (1)

    user15672038
    user15672038

    Reputation:

    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
    }
    

    Upvotes: 1

    Related Questions