How to update my array of comments in reactjs? - node.js

Question

I have Posts and each post has comments. I created a component and fetched the post's comments. These comments are in array form. I mapped into the array and displayed the comments individually. The challenge I am having now is how to update the individual comments. I am using node.js and mongodb for the backend. I am new to all of these and wondering the way to handle this.
Everything works well when I tested via postman. I can update the comments. To update the comments, I need the comment Id of the comment I want to update. Remember, each comment sits in a post.
In my backend, the path to edit an individual comment is like this:
router.put("/posts/:id/comment/:commentId", async (req, res) =>{
//my codes
}
How to get the comment's id in react is my challenge now and how to fetch the value of each comment so that I can update it. Here are my codes:
export default function Comments() {
const PF = "http://localhost:5000/images/";
const {user} = useContext(Context)
const location = useLocation()
const path = location.pathname.split("/")[2];
const [comments, setComments] = useState([]);// to fetch the comments for individual post
const [updateComment, setUpdateComment] = useState(false);//for change edit mode
const [commentdescription2, setCommentDescription] = useState("")
I fetched the comments for individual posts here:
useEffect(() => {
const getPost = async () =>{
try{
const response = await axios.get("/posts/"+path )
setComments(response.data.comments) //array of comments
}catch(err){
console.log(err)
}
}
getPost()
}, [path])
The function that I tried to write to update the comments. I need the id of the comment to be able to update it to the database:
const handleCommentUpdate = async (id) =>{
const commentId = comments.map((singleId) => singleId._id ==id)
try{
await axios.put("/posts/"+ path + "/comment" + commentId, {
author: user._id,
commentdescription: commentdescription2,
})
window.location.replace("/")
}catch(err){
console.log(err)
}
}
I mapped into the array of comments and displayed them here:
return (
<div className="comment">
<h5 className='users-comment'>Users comments</h5>
{comments.map((singleComment, index)=>{
//console.log(singleComment)
const {author, commentdescription, _id, createdAt} = singleComment
return(
<>
{updateComment == _id ? //toggles comment into edit mode
<div className='comment-div' key={_id} >
<textarea className='comment-wrapper' type='text'
onChange={(e) => setCommentDescription(e.target.value)} value={commentdescription2}>
</textarea>
<button className='comment-btn'onClick={handleCommentUpdate(_id)}>Update Post</button>
</div>
:
<div className='displayed-comments'key={_id}>
<div className="commentPic">
<img className="user-pics" src={PF + singleComment.author.profilePicture} alt="" />
</div>
<div className="comment-info">
<div className="comment-author-div">
<div className='comment-author-date-info'>
<h4 className="comment-author">{singleComment.author.username}</h4>
<p className="comment-date">{new Date(singleComment.createdAt).toDateString()}
</p>
</div>
<div className="comment-edit-delete-div">
<i className="singlePostIcon fas fa-edit" onClick={() => setUpdateComment(_id)} ></i>
<i className="singlePostIcon far fa-trash-alt" ></i>
</div>
</div>
<p className="comment-content">{singleComment.commentdescription}</p>
</div>
</div>
}
</>
)
})}
</div>
)
Error message that I got when I tried using the function that I wrote about is :
Status Code: 404 Not Found
Is there a way out of this? Thanks

Answer 1

You need pass prop onClick a function. So you should update onClick like this.
onClick={() => handleCommentUpdate(_id)}
And you have the id of comment when you call handleCommentUpdate. So you just use it with you logic
const handleCommentUpdate = async (id) => {
try {
await axios.put("/posts/" + path + "/comment" + id, {
author: user._id,
commentdescription: commentdescription2,
});
window.location.replace("/");
} catch (err) {
console.log(err);
}
};