Build a Nested Comments and Replies System in React

[@tezaRu]

code :-
import React, { useState } from "react";
import "./App.css";
const Comment = ({ comment }) => {
const [showReplies, setShowReplies] = useState(false);
const [replyText, setReplyText] = useState("");
const [replies, setReplies] = useState(comment.replies || []);
const handleAddReply = () => {
if (replyText.trim()) {
setReplies([...replies, { text: replyText, replies: [] }]);
setReplyText("");
}
};
return (

{comment.text}
setShowReplies(!showReplies)}>
{showReplies ? "Hide replies" : "Show replies"}

{showReplies && (

setReplyText(e.target.value)}
placeholder="Write a reply..."
/>

Add Reply

{replies.map((reply, index) => (

))}

)}

);
};
const CommentSection = () => {
const [comments, setComments] = useState([
{ text: "This is a comment", replies: [] },
{ text: "This is another comment", replies: [] },
{ text: "This is another comment", replies: [] },
]);
const [newCommentText, setNewCommentText] = useState("");
const handleAddComment = () => {
if (newCommentText.trim()) {
setComments([...comments, { text: newCommentText, replies: [] }]);
setNewCommentText("");
}
};
return (

setNewCommentText(e.target.value)}
placeholder="Add a new comment..."
/>
Add Comment
{comments.map((comment, index) => (

))}

);
};
function App() {
return (

Nested Comments and Replies


);
}
export default App;