> For the complete documentation index, see [llms.txt](https://tophivetheme.gitbook.io/vurox/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tophivetheme.gitbook.io/vurox/components/comments.md).

# Comments

```jsx
import React, { createElement, useState } from 'react';
import { Comment, Tooltip, Avatar } from 'antd';
import moment from 'moment';
import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';

const Demo = () => {
  const [likes, setLikes] = useState(0);
  const [dislikes, setDislikes] = useState(0);
  const [action, setAction] = useState(null);

  const like = () => {
    setLikes(1);
    setDislikes(0);
    setAction('liked');
  };

  const dislike = () => {
    setLikes(0);
    setDislikes(1);
    setAction('disliked');
  };

  const actions = [
    <span key="comment-basic-like">
      <Tooltip title="Like">
        {createElement(action === 'liked' ? LikeFilled : LikeOutlined, {
          onClick: like,
        })}
      </Tooltip>
      <span className="comment-action">{likes}</span>
    </span>,
    <span key=' key="comment-basic-dislike"'>
      <Tooltip title="Dislike">
        {React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined, {
          onClick: dislike,
        })}
      </Tooltip>
      <span className="comment-action">{dislikes}</span>
    </span>,
    <span key="comment-basic-reply-to">Reply to</span>,
  ];

  return (
    <Comment
      actions={actions}
      author={<a>Han Solo</a>}
      avatar={
        <Avatar
          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
          alt="Han Solo"
        />
      }
      content={
        <p>
          We supply a series of design principles, practical patterns and high quality design
          resources (Sketch and Axure), to help people create their product prototypes beautifully
          and efficiently.
        </p>
      }
      datetime={
        <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
          <span>{moment().fromNow()}</span>
        </Tooltip>
      }
    />
  );
}

ReactDOM.render(<Demo />, mountNode);
```

### API <a href="#api" id="api"></a>

| Property | Description                                                                      | Type              | Default | Version |
| -------- | -------------------------------------------------------------------------------- | ----------------- | ------- | ------- |
| actions  | List of action items rendered below the comment content                          | Array             | -       |         |
| author   | The element to display as the comment author                                     | string\|ReactNode | -       |         |
| avatar   | The element to display as the comment avatar - generally an antd `Avatar` or src | string\|ReactNode | -       |         |
| children | Nested comments should be provided as children of the Comment                    | ReactNode         | -       |         |
| content  | The main content of the comment                                                  | string\|ReactNode | -       |         |
| datetime | A datetime element containing the time to be displayed                           | string\|ReactNode | -       |         |