ReactJS UI Ant Design Comment Component

Last Updated : 02 Jun, 2021

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> 
  ); 
}