refactoring ScrollButton using hooks

src/components/scrollButton/ScrollButton.jsx

@@ -1,45 +1,43 @@
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from './ScrollButton.module.css';
 
-class ScrollButton extends Component {
-  componentDidMount() {
-    window.addEventListener('scroll', this.scrollFunction);
-  }
+const ScrollButton = () => {
+  const [displayButton, setDisplayButton] = useState(false);
 
-  componentWillUnmount() {
-    window.removeEventListener('scroll', this.scrollFunction);
-  }
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 20) {
+        setDisplayButton(true);
+      } else {
+        setDisplayButton(false);
+      }
+    };
 
-  scrollFunction = () => {
-    const mybutton = document.getElementById('btn-back-to-top');
-    if (
-      document.body.scrollTop > 20 ||
-      document.documentElement.scrollTop > 20
-    ) {
-      mybutton.style.display = 'block';
-    } else {
-      mybutton.style.display = 'none';
-    }
-  };
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
 
-  backToTop = () => {
+  const backToTop = () => {
     window.scrollTo({
       top: 0,
       behavior: 'smooth',
     });
   };
 
-  render() {
-    return (
-      <button
-        id="btn-back-to-top"
-        className={styles.ScrollButton}
-        onClick={this.backToTop}
-      >
-        Scroll to Top
-      </button>
-    );
-  }
-}
+  return (
+    <button
+      id="btn-back-to-top"
+      className={`${styles.ScrollButton} ${
+        displayButton ? styles.show : styles.hide
+      }`}
+      onClick={backToTop}
+    >
+      Scroll to Top
+    </button>
+  );
+};
 
 export default ScrollButton;

src/components/scrollButton/ScrollButton.module.css

@@ -21,3 +21,11 @@
 .ScrollButton:active {
   transform: scale(0.95);
 }
+
+.show {
+  display: block;
+}
+
+.hide {
+  display: none;
+}