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 neveropen, 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/
