first time I post here !
We're working on a group project and we have an issue in the incrementation of an item in our front-end. At the moment we can check in our console.log that the number is rising when click on the button.
Althought, we have to refresh the page to see the new "like".
So here's the code in our compenent.
import "./Post.css";
import { useEffect, useState } from "react";
import { addLike, createPost } from '../../lib/social-network-library-master';
function Post({post}) {
const handleLikes = async () => {
let result = await addLike(post._id)
};
return (
<div id="general-container">
<h2>{post.title}</h2><br/>
<p>{post.content}</p><br/>
<p>Posté par {post.firstname} {post.lastname}</p><br/>
<div className="boutton-like-container">
<button className="boutton-like" onClick={() =>handleLikes()}>
like
</button>
<p>{post.likes.length} likes</p>
</div>
</div>
)
};
export default Post;
You need a state here to manage the likes.
Something like
const [counter, setCounter] = useState(0)
const handleLikes = async () => {
let result = await addLike(post._id);
//setCounter(prev => prev + 1);
// if the result is coming from api then instead just set the response that you get
setCounter(result)
};
then in the UI you can render it like so
<p>{counter}</p>