In module5, twitter clone, retweet a tweet. In code "e.target.dataset.like", is "like" coming from "data-like"? "data-like" confuses me

Javascript
1
${tweet.likes}
2

Hey @serpil,

In the code e.target.dataset.like, the “like” part is coming from data-like. When you use a data-* attribute in HTML, you can access its value using JavaScript via the dataset property. The dataset property is an object that contains all the custom data attributes (those that start with data-) of an element.

So when that forEach code runs:

tweetsData.forEach(function(tweet){
        feedHtml += `
<div class="tweet">
    <div class="tweet-inner">
        <img src="${tweet.profilePic}" class="profile-pic">
        <div>
            <p class="handle">${tweet.handle}</p>
            <p class="tweet-text">${tweet.tweetText}</p>
            <div class="tweet-details">
                <span class="tweet-detail">
                    <i class="fa-regular fa-comment-dots"
                    data-reply="${tweet.uuid}"
                    ></i>
                    ${tweet.replies.length}
                </span>
                <span class="tweet-detail">
                    <i class="fa-solid fa-heart"
                    data-like="${tweet.uuid}"
                    ></i>
                    ${tweet.likes}
                </span>
                <span class="tweet-detail">
                    <i class="fa-solid fa-retweet"
                    data-retweet="${tweet.uuid}"
                    ></i>
                    ${tweet.retweets}
                </span>
            </div>   
        </div>            
    </div>
</div>
`
   })
   return feedHtml 
}

and you see data-reply="${tweet.uuid}" this is the same as e.target.dataset.like. I haven’t fully looked into the context of the overall app but it seems like it’s main purpose is to fetch the tweet ID to do other logic with it.

3

I see. Thank you @roku :slight_smile:

1 Like