From 6459739dd0110bc15b226447cfe210be6bba3b91 Mon Sep 17 00:00:00 2001
From: "arjxn.py" <arjxn.py@gmail.com>
Date: Mon, 16 Oct 2023 05:16:58 +0530
Subject: [PATCH] Convert `Comments` to functional component

---
 src/components/comments/Comments.tsx | 37 ++++++++++++++--------------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/components/comments/Comments.tsx b/src/components/comments/Comments.tsx
index c38a410..cdd6724 100644
--- a/src/components/comments/Comments.tsx
+++ b/src/components/comments/Comments.tsx
@@ -3,7 +3,6 @@ import CommentsHeader from "./CommentsHeader";
 import AddComment from "./AddComment";
 import Comment from "./Comment";
 
-// Define a type for your comment objects
 interface CommentObject {
   userName: string;
   commentText: string;
@@ -14,22 +13,22 @@ interface CommentsProps {
   comments: CommentObject[];
 }
 
-export class Comments extends React.Component<CommentsProps> {
-  render() {
-    const commentComponents = this.props.comments.map((comment, index) => (
-      <Comment
-        key={index}
-        userName={comment.userName}
-        commentText={comment.commentText}
-      />
-    ));
+const Comments: React.FC<CommentsProps> = ({ amountComments, comments }) => {
+  const commentComponents = comments.map((comment, index) => (
+    <Comment
+      key={index}
+      userName={comment.userName}
+      commentText={comment.commentText}
+    />
+  ));
 
-    return (
-      <div>
-        <CommentsHeader amountComments={this.props.amountComments} />
-        <AddComment />
-        {commentComponents}
-      </div>
-    );
-  }
-}
+  return (
+    <div>
+      <CommentsHeader amountComments={amountComments} />
+      <AddComment />
+      {commentComponents}
+    </div>
+  );
+};
+
+export default Comments;