Added Load More button

Author: dnlnvl

src/components/Mentor.js

@@ -9,7 +9,9 @@ class Mentor extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            Product: []
+            Product: [],
+            showProducts: 10,
+            isLoading: false
         }
     }
 
@@ -36,15 +38,26 @@ class Mentor extends Component {
         });*/
     }
 
+    loadMore = () => {
+        this.setState({ isLoading: true})
+        setTimeout(() => {
+            this.setState((prevState) => ({ isLoading: false, showProducts: prevState.showProducts + 10 }))
+        }, 3000)
+        clearTimeout()
+    }
+
     getSearchedProducts() {
         const { search } = this.props;
-        return search ? this.state.Product.filter(
+        const { showProducts } = this.state
+        const productList = search ? this.state.Product.filter(
             (data) => data.name.toLowerCase().indexOf(search.toLowerCase()) !== -1
         ) : this.state.Product;
+        return productList.slice(0, showProducts)
     }
 
 
     render() {
+        const { isLoading } = this.state
         return (
             <div className="main thememain-white">
                 <div className="container content-main">
@@ -54,6 +67,9 @@ class Mentor extends Component {
                             return <MentorList key={data.id} data={data} />
                         })}
                     </div>
+                    <div className="loadMore">
+                        <button onClick={this.loadMore.bind(this)}>{isLoading ? "Loading" : "Load More"}</button>
+                    </div>
                 </div>
             </div>
 

src/styles.css

@@ -228,3 +228,11 @@ body {
 .whiteColor{
     color: white !important;
 }
+
+.loadMore button {
+    background: linear-gradient(165deg, #6e60cc, #484389);
+    color: white;
+    width: 60vh;
+    padding: 20px;
+    margin: 20px auto;
+}