The backend calls to increment likes depicted by handleLike() and handleLike() functions successfully return the response of containing the number that's been incremented/decremented.
Unfortunately, this is the only way I can see photos.likes incremented/decrement in real time.
My question is: How do I make it so that I able to only increment/decrement the likes amount by 1 for the specific image's UserID that's being clicked on instead of ALL of them. Also, is there a way to avoid using frontend logic to accomplish this since the increment/decrement is happening on the server side?
I've hit a wall on this and not sure how to overcome it.
const [currentUserClicks, setCurrentUserClicks] = useState(1);
const [onChangeLikes, setonChangeLikes] = useState(null);
const handleLikesBasedOnUserId = (likedPhotoUserId) => {
if(currentUserClicks > 1) {
setCurrentUserClicks(currentUserClicks - 1);
handleDisLike(likedPhotoUserId); // sends data to server to decrement DB column
setonChangeLikes(false);
} else {
setCurrentUserClicks(currentUserClicks + 1);
handleLike(likedPhotoUserId); // sends data to server to increment DB column
setonChangeLikes(true);
}
};
return(
{
data.map((photos, index) => {
return <>
<div key={index}>
<img src={photos.url} alt="Photo" className="gallery-img" onClick={() => handleLikesBasedOnUserId(photos.UserID)}/>
<h5 className="likes">Likes: {!onChangeLikes ? photos.likes - 1: photos.likes + 1}</h5>
</div>
</>
})
}
);
In these cases you need to move the state locally to the mapped elements:
const { useState, useEffect } = React;
const App = () => data.map((pic) => <Pic key={pic.id} data={pic} />);
const Pic = ({ data }) => {
const [likes, setLikes] = useState(data.likes);
const handleClick = (type) => {
if (type === 'increment') {
if (likes - data.likes <= 0) {
// handleLike(id); // sends data to server to increment DB column
setLikes((l) => l + 1);
} else {
// handleDisLike(id); // sends data to server to decrement DB column
setLikes((l) => l - 1);
}
}
if (type === 'decrement') {
if (likes - data.likes >= 0) {
// handleDisLike(id); // sends data to server to decrement DB column
setLikes((l) => l - 1);
} else {
// handleLike(id); // sends data to server to increment DB column
setLikes((l) => l + 1);
}
}
};
return (
<div>
<img src={data.url} alt="Photo" className="gallery-img" />
<div className="container">
<h5 onClick={() => handleClick('decrement')}>-</h5>
<h5 className="likes">
Likes:
{likes}
</h5>
<h5 onClick={() => handleClick('increment')}>+</h5>
</div>
</div>
);
};
const data = [
{
url: 'https://upload.wikimedia.org/wikipedia/commons/a/a6/Pink_lady_and_cross_section.jpg',
likes: 10,
id: 'apple1',
},
{
url: 'https://upload.wikimedia.org/wikipedia/commons/2/22/Malus_domestica_a1.jpg',
likes: 25,
id: 'apple2',
},
];
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App/>).gallery-img {
width: 100px;
}
.container {
display: flex;
}
h5 {
cursor: pointer;
margin: 10px;
}<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>I was not sure what you were trying to do since you did not have any like/dislike button, so I was not sure of your logic: (first click --> like | second click --> reset | third click ?) So I added two like/dislike clickables and tweaked a bit the logic to permit only one like/dislike vote, and reset if trying to increase/decrease further, as it works here on StackOverflow.
Consider that you should handle this logic serverside by the way, and you should make a call on component mount to check if the user has already voted or not, in a real world scenario, or it's enough a refresh to be able to vote multiple times.