ReactJS UI Ant Design Comment Component

Ant Design Library has this component pre-built, and it is very easy to integrate as well. Comment Component is used to add the user comments, and it is used to display the user feedback and his discussion over this comment box. We can use the following approach in ReactJS to use the Ant Design Comment Component.

Comment Props:

• actions: It is used to denote the list of action items that are rendered below the comment content.
• author: It is used to denote the element which is displayed as the comment author.
• avatar: It is used to denote the element which is displayed as the comment avatar.
• children: It is used to indicate that the nested comments should be provided as children of the Comment.
• content: It is used to denote the main content of the comment.
• datetime: It is used to denote a datetime element that contains the time to be displayed.

Creating React Application And Installing Module:

• Step 1: Create a React application using the following command:

  
  
  

  npx create-react-app foldername

• Step 2: After creating your project folder i.e. foldername, move to it using the following command:

  cd foldername

• Step 3: After creating the ReactJS application, Install the required module using the following command:

  npm install antd
  npm install --save @ant-design/icons

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React, { createElement, useState } from 'react';
import { Comment, Avatar, Tooltip } from 'antd';
import "antd/dist/antd.css";
import {
  LikeOutlined, DislikeFilled,
  DislikeOutlined, LikeFilled
} from '@ant-design/icons';

export default function App() {

  // To maintain Like state
  const [likesCount, setLikesCount] = useState(0);

  // To maintain Dislike state
  const [dislikesCount, setDislikesCount] = useState(0);

  // To maintain action state
  const [action, setAction] = useState(null);

  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Comment Component</h4>
      <Comment
        author={<a>Gourav Hammad</a>}
        avatar={<Avatar style={{ backgroundColor: 'green' }}>G</Avatar>}
        content={
          <p>
           Greetings from GeeksforGeeks, I am sample comment.
           I am good, what about you?
          </p>

        }
        actions={[
          <Tooltip title="Like">
            <span onClick={() => {
              setLikesCount(1);
              setDislikesCount(0);
              setAction('liked');
            }}>
              {createElement(action === 'liked' ?
              LikeFilled : LikeOutlined)}
              {likesCount}
            </span>
          </Tooltip>,
          <Tooltip title="Dislike">
            <span onClick={() => {
              setLikesCount(0);
              setDislikesCount(1);
              setAction('disliked');
            }}>
              {React.createElement(action === 'disliked' ?
              DislikeFilled : DislikeOutlined)}
              {dislikesCount}
            </span>
          </Tooltip>
        ]}
        datetime={'30-05-2021 11:09AM'}
      />
    </div>
  );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://ant.design/components/comment/