how to map an array of objects that has values of array of objects-CodePudding

I have a list of comments that I fetch from my API looking like this. A comment has likes and dislikes alongside the user who posted the like or dislike.

const comments = [
    {
        id: 1,
        comment: "nice",
        author: "jenny",
        likes: [
            {
                id: 1,
                user: "alice"
            },
            {
                id: 2,
                user: "bob"
            }
        ],
        dislikes: [
            {
                
                id: 3,
                user: "sam"
            }
        ]
    },
    {
        id: 2,
        comment: "good job",
        author: "alice",
        likes: [
            {
                id: 2,
                user: "bob"
            }
        ],
        dislikes: [
            {
                
                id: 3,
                user: "sam"
            }
        ]
    }
]

Lets say Alice is logged in.

Now the map to display the comments works fine, but I want to do "nested map" which loops through the likes and dislikes array of objects within the same object array and see if the user of a like or dislike matches who is logged in to display a confirmation.

My current code:

const signedInUser = "alice";

return(
    Object.keys(comments).map((x, index) => {
      const com = comments[x];
  
      <div className="comment" key={index}>
        <p>{com.author}</p>
        <p>{com.comment}</p>
  
        {com.likes.map((x) => {
          {
            x.user === signedInUser ? (
              <p>You liked this</p>
            ) : (
              <button>Like</button>
            );
          }
        })}
      </div>;
    })
  );

I am doing this with react, since I am trying to

CodePudding user response：

You are suppose to use some to get a boolean response if there exist a like by the same user. map return response for every object in the like array.

return(
    Object.keys(comments).map((x, index) => {
      const com = comments[x];
  
      <div className="comment" key={index}>
        <p>{com.author}</p>
        <p>{com.comment}</p>
  
        {com.likes.some((x) => x.user === signedInUser)?
             (
              <p>You liked this</p>
            ) : (
              <button>Like</button>
            );
        }
      </div>;
    })
  );

CodePudding user response：

const renderLikeOrDislikeButton = (arr, text1, ) =>{
   if(arr.some((x) => x.user === signedInUser)){
      return <p>You {text1} this</p>
   }
   return <button>{text2}</button>
}

return(
{
  Object.keys(comments).map((x, index) => {
    const com = comments[x];

    return(
      <div className="comment" key={index}>
        <p>{com.author}</p>
        <p>{com.comment}</p>
        {renderLikeOrDislikeButton(com.likes, "liked", "Like")}
        {renderLikeOrDislikeButton(com.likes, "disliked", "Dislike)}
      </div>
    )
  });