Primera parte de mi código:

 const Inventory = () => { const [products, setProducts] = useState([]); const [pageCount,setPageCount] = useState(0); //console.log(pageCount); const [page,setPage] = useState(0); const navigate = useNavigate(); useEffect(() => { fetch(`http://localhost:3000/products?page=${page}`) .then((res) => res.json()) .then((data) => setProducts(data)); }, [products,page]); useEffect(()=>{ axios.get('http://localhost:3000/product-count') .then((res) => { const productCount = res?.data?.count; //console.log("count product",count); const pages = Math.ceil(productCount/6); setPageCount(pages); }) },[page])

Sección de retorno, este código devolverá la paginación:

 <div className="pagination"> { [...Array(pageCount).keys()] .map(number => <button key={number} className={page===number? 'selected': 'pagination'} onClick={()=> setPage(number)} > {number+1} </button>) } </div>

Y este es el código del lado del servidor:

 app.get("/products",async(req,res)=>{ const page = parseInt(req.query.page); //console.log(page); const q = {}; const cursor = productCollection.find(q); let result; if(page){ result = await cursor.skip(page * 6).limit(6).toArray(); } else{ result = await cursor.toArray(); } res.send(result); }) // get product count app.get("/product-count",async(req,res)=>{ const query = {}; const count = await productCollection.countDocuments(query); res.json({count}); })

Quiero cargar 6 datos en la primera carga. Pero cuando se cargan los datos, muestra todos los datos. Cuando hago clic en el botón de paginación, funciona bien, excepto el primer botón.