diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js
index f28d01b6d..702d7c4dc 100644
--- a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js
+++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js
@@ -6,44 +6,52 @@ import {timeago} from 'coral-framework/services/i18n';
 import {Slot} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
-const FeaturedComment = ({comment, asset, viewComment}) => {
-  return (
-    <div className={cn(styles.featuredComment, `${name}__featured-comment`)}>
+class FeaturedComment extends React.Component {
 
-      <blockquote className={cn(styles.quote, `${name}__featured-comment__comment-body`)}>
-        {comment.body}
-      </blockquote>
+  viewComment = () => {
+    this.props.viewComment(this.props.comment.id);
+  }
 
-      <div className={cn(`${name}__featured-comment__username-box`)}>
-        <strong className={cn(styles.username, `${name}__featured-comment__username`)}>
-          {comment.user.username}
-        </strong>
-        <span className={cn(styles.timeago, `${name}__featured-comment__timeago`)}>
-          ,{' '}{timeago(comment.created_at)}
-        </span>
+  render() {
+    const {comment, asset} = this.props;
+    return (
+      <div className={cn(styles.featuredComment, `${name}__featured-comment`)}>
+
+        <blockquote className={cn(styles.quote, `${name}__featured-comment__comment-body`)}>
+          {comment.body}
+        </blockquote>
+
+        <div className={cn(`${name}__featured-comment__username-box`)}>
+          <strong className={cn(styles.username, `${name}__featured-comment__username`)}>
+            {comment.user.username}
+          </strong>
+          <span className={cn(styles.timeago, `${name}__featured-comment__timeago`)}>
+            ,{' '}{timeago(comment.created_at)}
+          </span>
+        </div>
+
+        <footer className={cn(styles.footer, `${name}__featured-comment__footer`)}>
+          <div className={cn(styles.reactionsContainer, `${name}__featured-comment__reactions`)}>
+
+            <Slot
+              fill="commentReactions"
+              comment={comment}
+              commentId={comment.id}
+              asset={asset}
+              inline
+            />
+          </div>
+          <div className={cn(styles.actionsContainer, `${name}__featured-comment__actions`)}>
+            <a className={cn(styles.goTo, `${name}__featured-comment__go-to`)}
+              onClick={this.viewComment}>
+              <Icon name="forum" className={styles.repliesIcon} /> {comment.replyCount} |
+              Go to conversation<Icon name="keyboard_arrow_right" className={styles.goToIcon} />
+            </a>
+          </div>
+        </footer>
       </div>
-
-      <footer className={cn(styles.footer, `${name}__featured-comment__footer`)}>
-        <div className={cn(styles.reactionsContainer, `${name}__featured-comment__reactions`)}>
-
-          <Slot
-            fill="commentReactions"
-            comment={comment}
-            commentId={comment.id}
-            asset={asset}
-            inline
-          />
-        </div>
-        <div className={cn(styles.actionsContainer, `${name}__featured-comment__actions`)}>
-          <a className={cn(styles.goTo, `${name}__featured-comment__go-to`)}
-            onClick={() => viewComment(comment.id)} >
-            <Icon name="forum" className={styles.repliesIcon} /> {comment.replyCount} |
-            Go to conversation<Icon name="keyboard_arrow_right" className={styles.goToIcon} />
-          </a>
-        </div>
-      </footer>
-    </div>
-  );
-};
+    );
+  }
+}
 
 export default FeaturedComment;