now everything works with React ToolKit

client/src/components/post/CommentItem.js

@@ -1,49 +1,38 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import formatDate from '../../utils/formatDate';
-import { deleteComment } from '../../actions/post';
+import React from "react";
+import { Link } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import formatDate from "../../utils/formatDate";
+import { deleteComment } from "../../actions/post";
 
 const CommentItem = ({
   postId,
   comment: { _id, text, name, avatar, user, date },
-  auth,
-  deleteComment
-}) => (
-  <div className="post bg-white p-1 my-1">
-    <div>
-      <Link to={`/profile/${user}`}>
-        <img className="round-img" src={avatar} alt="" />
-        <h4>{name}</h4>
-      </Link>
+}) => {
+  const dispatch = useDispatch();
+  const auth = useSelector((state) => state.auth);
+  return (
+    <div className="post bg-white p-1 my-1">
+      <div>
+        <Link to={`/profile/${user}`}>
+          <img className="round-img" src={avatar} alt="" />
+          <h4>{name}</h4>
+        </Link>
+      </div>
+      <div>
+        <p className="my-1">{text}</p>
+        <p className="post-date">Posted on {formatDate(date)}</p>
+        {!auth.loading && user === auth.user._id && (
+          <button
+            onClick={async () => await dispatch(deleteComment(postId, _id))}
+            type="button"
+            className="btn btn-danger"
+          >
+            <i className="fas fa-times" />
+          </button>
+        )}
+      </div>
     </div>
-    <div>
-      <p className="my-1">{text}</p>
-      <p className="post-date">Posted on {formatDate(date)}</p>
-      {!auth.loading && user === auth.user._id && (
-        <button
-          onClick={() => deleteComment(postId, _id)}
-          type="button"
-          className="btn btn-danger"
-        >
-          <i className="fas fa-times" />
-        </button>
-      )}
-    </div>
-  </div>
-);
-
-CommentItem.propTypes = {
-  postId: PropTypes.string.isRequired,
-  comment: PropTypes.object.isRequired,
-  auth: PropTypes.object.isRequired,
-  deleteComment: PropTypes.func.isRequired
+  );
 };
 
-const mapStateToProps = (state) => ({
-  auth: state.auth
-});
-
-export default connect(mapStateToProps, { deleteComment })(CommentItem);
-
+export default CommentItem;