How to make page number one as a default page - reactjs

Question

Using React.js, When I change between filters buttons, I want pagination get back to the first page (number one).
This is my code in pagination component:
import React, { useState } from 'react'
const Pagination = ({productsPerPage, totalPosts, paginate}) => {
const [currentPage, setCurrentPage] = useState(1)
const PageNumbers =[]
const int = Math.ceil(totalPosts / productsPerPage)
for (let i = 1; i<= int; i++) {
PageNumbers.push(i)
}
return (
<nav className="">
<ul className="pagination">
<li className={currentPage === 1 ? 'disabled' : ''}>
<a onClick={() =>{setCurrentPage(currentPage - 1); paginate(currentPage - 1);}}>Previous</a>
</li>
{PageNumbers.map(number => (
<li
key={number}
className={number === currentPage ? "page-item active" : "page-item "}
>
<a
onClick={() => paginate(number)}
href="!#"
className="page-link "
>
{number}
</a>
</li>
))}
<li className={currentPage === int ? 'disabled' : ''}>
<a onClick={() => {setCurrentPage(currentPage + 1); paginate(currentPage + 1); }}>Next</a>
</li>
</ul>
</nav>
)
}
export default Pagination
This is the main App
const App = () => {
const [itemsAmount] = useState(100);
const [fromProduct, setFromProduct] = useState(1);
const [keys, setKeys] = useState([]);
const [products, setProducts] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [productsPerPage, setProductsPerPage] = useState(10);
useEffect(() => {
axios('The API link')
.then(res => {
setProducts(res.data.itemsList);
res.data.itemsList[0] &&
setKeys(Object.keys(res.data.itemsList[0]).map((key, index) => key));
})
}, [Organization, HardWareStatuses, hardvarutyp, fromProduct,
itemsAmount,setProductsPerPage]);
/* Get current products*/
const indexOfLastProduct = currentPage * productsPerPage;
const indexOfFirstProduct = indexOfLastProduct - productsPerPage;
const currentProducts =
products.slice(indexOfFirstProduct,indexOfLastProduct );
/* Change page */
const paginate = pageNumber => setCurrentPage(pageNumber)
return (
<div>
{/* Create pagination */}
<div className="">
<Pagination
productsPerPage={productsPerPage}
totalProducts={products.length}
paginate={paginate}
filters ={filters}
/>
</div>
</div>
<Products products={currentProducts} keys={keys} />
<ExportCSV products={products} keys={keys} />
</div>
);
};
export default App;

Answer 1

Your pagination component need to be aware about your filters, and I guess those are managed by a parent component. One easy way would be to add them as parameters to your component to make it aware of them.
<Pagination productsPerPage="productsPerPage" totalPosts="totalPosts" paginate="paginate" filters="filters"/>
This way, you can implement a listenner to run some code only when filters change, using the useEffect hook:
import React, { useState, useEffect } from 'react'
const Pagination = ({productsPerPage, totalPosts, paginate, filters}) => {
const [currentPage, setCurrentPage] = useState(1)
const PageNumbers =[]
const int = Math.ceil(totalPosts / productsPerPage)
useEffect(() => {
setCurrentPage(1);
}, [filters]);
for (let i = 1; i<= int; i++) {
PageNumbers.push(i)
}
return (
<nav className="">
...
</nav>
)
}
export default Pagination;