So I create an Table Likes and I want to create a change of like when the user connected has already liked with a red Heart. When a post is not liked by an user connecter the heart is empty.
When I had to map() my table Likes to have the id of the userliked and see if the user connected have liked the post, it work but if there is "0 likes" the heart doesn't appear and if there is "+2 likes" I have the red heart and the empty heart. My requeste doesn't work. Here is a exemple on picture:
And here is my request :
<div className="home-icon-post" onClick={handleLikes}>
{
!isEmpty(likesData[0]) &&
likesData
.map((likes) => {
if (likes.id === userData.id && likes.idComment === comment.idObject ) return <div key={likes.idObject}>
<div>
{
<div>
<FontAwesomeIcon className={"heartFull"} icon={["fa","heart"]} />
</div>
}
</div>
</div>
else if (likes.id !== userData.id && likes.idComment === comment.idObject ) {
return <FontAwesomeIcon className={"iconEmpty" } icon={["fa","heart"]} />
}
else return null
})
}
</div>
thank you for helping me
The problems was on the map.(), Somebody give me the solution and here is the answer:
Here is the variable before the return on react:
const isLiked = () => {
return Array.from(likesData).filter(likes => likes.id === userData.id && likes.idComment === comment.idObject).length > 0
}
And the call of variable on return react:
<div className="home-icon-post" onClick={() => handleLikes()} >
{
<FontAwesomeIcon className={`${isLiked(comment.idObject) ? "heartFull" : "heartEmpty"}`} icon={["fa","heart"]} />
}
</div>