Conditional Rendering problem
I am having trouble when a user likes he/she cannot unlike the post thus causing undefined value to be sent to the API endpoint using source code below
"use client"
export default function Comment () {
const {data,isLoading}=useSWR('/api/login',fetcher)
const [liked, setLiked] = useState(false)
const handleLike = async()=>{
try {
// Perform API call to add like
await axios.post("/api/like/", {
postId: post.id,
});
setLiked((prevLiked) => !prevLiked);
router.refresh();
} catch (error) {
console.log("Error adding like", error);
}
}
const handleRemoveLike = async()=>{
try {
// Perform API call to remove like
const updatedLikes = likes.filter((like: { userId: any; }) => like.userId == data?.id);
console.log(updatedLikes)
await axios.delete(`/api/like/${updatedLikes[0].id}`);
router.refresh();
setLiked((prevLiked) => !prevLiked);
} catch (error) {
console.log("Error removing like", error);
}
}
return(
<div className='px-8 py-4 flex flex-row justify-between'>
{likes.some((like:any) => like.userId === data?.id) || liked? (
<AiFillHeart size={24} onClick={handleRemoveLike} />
) : (
<AiOutlineHeart size={24} onClick={handleLike} />
)}{post.likes.length}{' '} <FaRegCommentDots size={24} onClick={() => setShowComments(!showComments)} />{post.comments.length}{' '}<IoMdShareAlt size={24} onClick={handleShare}/></div>
)
}
"use client"
export default function Comment () {
const {data,isLoading}=useSWR('/api/login',fetcher)
const [liked, setLiked] = useState(false)
const handleLike = async()=>{
try {
// Perform API call to add like
await axios.post("/api/like/", {
postId: post.id,
});
setLiked((prevLiked) => !prevLiked);
router.refresh();
} catch (error) {
console.log("Error adding like", error);
}
}
const handleRemoveLike = async()=>{
try {
// Perform API call to remove like
const updatedLikes = likes.filter((like: { userId: any; }) => like.userId == data?.id);
console.log(updatedLikes)
await axios.delete(`/api/like/${updatedLikes[0].id}`);
router.refresh();
setLiked((prevLiked) => !prevLiked);
} catch (error) {
console.log("Error removing like", error);
}
}
return(
<div className='px-8 py-4 flex flex-row justify-between'>
{likes.some((like:any) => like.userId === data?.id) || liked? (
<AiFillHeart size={24} onClick={handleRemoveLike} />
) : (
<AiOutlineHeart size={24} onClick={handleLike} />
)}{post.likes.length}{' '} <FaRegCommentDots size={24} onClick={() => setShowComments(!showComments)} />{post.comments.length}{' '}<IoMdShareAlt size={24} onClick={handleShare}/></div>
)
}
0 Replies