Created sample-pagination

Author: ronak232

sample-pagination

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react';
+import './App.css';
+
+export default function App() {
+  const [data, setData] = useState([]);
+  const [currentPage, setPerPage] = useState(1);
+
+  const itemsPerPage = 10;
+
+  const fetchProductData = async () => {
+    const fetchResponse = await fetch(
+      'https://dummyjson.com/products?limit=100'
+    );
+    const resp = await fetchResponse.json();
+    console.log(resp);
+
+    if (resp && resp.products) {
+      setData(resp.products);
+    }
+  };
+
+  useEffect(() => {
+    fetchProductData();
+  }, []);
+
+  const selectedPageProducts = (seletedPage) => {
+    if (
+      seletedPage >= 1 &&
+      seletedPage <= data.length / 10 &&
+      seletedPage !== currentPage
+    ) {
+      setPerPage(seletedPage);
+    }
+  };
+
+  return (
+    <div className="App">
+      <div className="products">
+        {data
+          .slice(
+            currentPage * itemsPerPage - itemsPerPage,
+            currentPage * itemsPerPage
+          )
+          .map((item) => {
+            return (
+              <span className="products-card" key={item.id}>
+                <img src={item.thumbnail} alt={item.images[1]} />
+                <h1 className="product-title">{item.title}</h1>
+              </span>
+            );
+          })}
+      </div>
+      {data.length > 0 && (
+        <div className="pagination">
+          <button
+            onClick={() => selectedPageProducts(currentPage - 1)}
+            className="prev"
+          >
+            ◀️
+          </button>
+          {[...Array(data.length / itemsPerPage)].map((_, index) => {
+            return (
+              <button
+                className={currentPage === index + 1 ? 'active' : ''}
+                onClick={() => selectedPageProducts(index + 1)}
+                key={index}
+              >
+                {index + 1}
+              </button>
+            );
+          })}
+          <button
+            onClick={() => selectedPageProducts(currentPage + 1)}
+            className="next"
+          >
+            ▶️
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// export default App;