I have a button when pressed onClick triggers LikeComment which posts the like to a DataBase using the current comment id and user who posted the comment.
<button className="btn" onClick={LikeComment(comment_id, user_id)}>
<div className="text">
<i className="fas fa-thumbs-up"></i>
<p>{comment_likes.length}</p>
</div>
</button>
What would be the best way to increment comment_likes.length when ever the button is pressed. Right now my problem is that the value only updates when page refreshes.
I have tried to do this, but It doesn't work as intended
<p>{comment_likes.length && LikeComment ? (comment_likes.length+1) : (comment_likes.length)}</p>
I want to achieve this by detecting when LikeComment is pressed to increment the original value by 1.
Any tips to tackle this would be appreciated..
First of all you need to store the current like amount in the local state of the component. This way you can just display the current amount of likes and react will automatically update the display if you change the buttonLikes amount.
const [buttonLikes, setButtonLikes] = useState(comment_likes)
Then you'll need an event handler which will increment the like amount and post your changes to the DB
const handleClickLikeButton = (comment_id, user_id) => {
setButtonLikes((prevValue) => prevValue + 1)
LikeComment(comment_id, user_id)
}
Now your display logic will look like this
<button className="btn" onClick={handleButtonLike(comment_id, user_id)}>
<div className="text">
<i className="fas fa-thumbs-up"></i>
<p>{buttonLikes}</p>
</div>
</button>
you can use
const [likesCount, setlikesCount] = useState(0)
and then create a function like this :
const callapiforlike=(comment_id, user_id){
// call some api
}
const handleLikeCountIncrement= (comment_id, user_id) => {
setlikesCount(likesCount + 1)
callapiforlike(comment_id, user_id)
}
and for like button
<button className="btn" onClick={handleLikeCountIncrement(comment_id, user_id)}>
<div className="text">
<i className="fas fa-thumbs-up"></i>
<p>{likesCount}</p>
</div>
</button>