diff --git a/webapp/channels/src/components/post_view/scroll_to_bottom_arrows.tsx b/webapp/channels/src/components/post_view/scroll_to_bottom_arrows.tsx
index abd6b0defc..8df00dd452 100644
--- a/webapp/channels/src/components/post_view/scroll_to_bottom_arrows.tsx
+++ b/webapp/channels/src/components/post_view/scroll_to_bottom_arrows.tsx
@@ -1,35 +1,33 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import classNames from 'classnames';
 import React from 'react';
 
 import ScrollToBottomIcon from 'components/widgets/icons/scroll_to_bottom_icon';
 
-interface Props {
+type Props = {
     isScrolling: boolean;
     atBottom?: boolean;
     onClick: () => void;
-}
+};
 
-export default class ScrollToBottomArrows extends React.PureComponent<Props> {
-    render() {
-        // only show on mobile
-        if (window.innerWidth > 768) {
-            return null;
-        }
-
-        let className = 'post-list__arrows';
-        if (this.props.isScrolling && this.props.atBottom === false) {
-            className += ' scrolling';
-        }
-
-        return (
-            <div
-                className={className}
-                onClick={this.props.onClick}
-            >
-                <ScrollToBottomIcon/>
-            </div>
-        );
+const ScrollToBottomArrows = ({isScrolling, atBottom, onClick}: Props) => {
+    // only show on mobile
+    if (window.innerWidth > 768) {
+        return null;
     }
-}
+
+    return (
+        <div
+            className={classNames('post-list__arrows', {
+                scrolling: isScrolling && atBottom === false,
+            })}
+            onClick={onClick}
+        >
+            <ScrollToBottomIcon/>
+        </div>
+    );
+};
+
+export default ScrollToBottomArrows;