Please I need help.
I want to display the orange input only the reply button of a single comment is clicked!
Could your comment component have some state that keeps track of whether Reply was clicked? Then you could conditionally display the orange box only when Reply was clicked.
It has but the comments are mapped and a reply is to be made based on a comment id so I also need to to show the reply input based on the comment id (for a single comment)
I’m having trouble understanding how this is set up. Could you post some of your code?
Ok.
It starts from where I map the comments.
Thank you
/* eslint-disable no-unused-vars */
import { useState } from “react”;
import CustomIcon from “components/common/CustomIcon”;
import CommentForm from “./CommentForm”;
import { likePost } from “services/postService”;
import { timeSince } from “utils/helpers”;
import useUser from “hooks/useUser”;
import { Link } from “react-router-dom”;
import { postReply } from “services/repliesService”;
const CommentSection = ({ postId, comments, likes }) => {
const [isLiked, setIsLiked] = useState(false);
const [likesCount, setLikesCount] = useState(likes ? likes.length : 0);
const [showReply, setShowReply] = useState(false);
const [message, setMessage] = useState("");
const { user } = useUser();
const handleLikePost = async () => {
try {
const response = await likePost(postId);
console.log(response);
} catch (ex) {
console.log(ex);
}
};
const handleSubmit = (e) => {
e.preventDefault();
};
if (!comments) {
return null;
}
const handleReply = (commentId) => {
postReply(commentId, message)
.then((res) => {
if (res.ok) {
alert(“Successful!”);
console.log(res.data);
}
})
.catch((err) => console.log(err));
};
return (
{comments && comments.length} comments
{likesCount} likes
{comments &&
comments.map((comment, i) => (
{comment.user}
{comment.message}
{
setShowReply((prev) => !prev);
}}
>
Reply
{showReply && (
{ setMessage(e.target.value); }} /> )}
{timeSince(new Date(comment.createdAt))}
export default CommentSection;
So what I’m suggesting is that you could have a Comment component that keeps track of whether its own Reply has been clicked. In your map you would create each Comment. The showReply would be moved from CommentSection into the new Comment component.
Ok.
But could you just help me with the way code (the way you would write it).
Thanks.