Closed adit26data closed 1 year ago
The pagination component is not working as its not switching and the 1 and 2 options are not coming as per your code this is the code:
import React, { Fragment, useEffect, useState } from 'react' import "./Products.css" import { useSelector, useDispatch } from 'react-redux' import { clearErrors, getProduct } from '../../actions/productAction' import Loader from '../layout/Loader/Loader' import ProductCard from '../Home/ProductCard' import Pagination from "react-js-pagination" import { useAlert } from 'react-alert' function Products({ match }) {
const dispatch = useDispatch(); const [currentPage, setCurrentPage] = useState(1); const { products, loading, error, productsCount, resultPerPage } = useSelector((state) => state.products); const keyword = match.params.keyword; const setCurrentPageNo = (e) => { setCurrentPage(e); } useEffect(() => { dispatch(getProduct(keyword, currentPage)); }, [dispatch, keyword, currentPage]) return ( <Fragment> {loading ? (<Loader />) : ( <Fragment> <h2 className='productsHeading'>Products</h2> <div className="products"> {products && products.map((product) => ( <ProductCard key={product._id} product={product} /> ))} </div> <div className="paginationBox"> <Pagination activePage={match.params.page} itemsCountPerPage={resultPerPage} totalItemsCount={productsCount} onChange={setCurrentPageNo} nextPageText="Next" prevPageText="Prev" firstPageText="1st" lastPageText="Last" itemClass="page-item" linkClass="page-link" activeClass="active" activeLinkClass="pageLinkActive" /> </div> </Fragment> )} </Fragment> )
}
export default Products
the Pagination links are failing to switch and its only showing 1st prev next and last...1 and 2 are not there
Got it working...anyway
The pagination component is not working as its not switching and the 1 and 2 options are not coming as per your code this is the code:
import React, { Fragment, useEffect, useState } from 'react' import "./Products.css" import { useSelector, useDispatch } from 'react-redux' import { clearErrors, getProduct } from '../../actions/productAction' import Loader from '../layout/Loader/Loader' import ProductCard from '../Home/ProductCard' import Pagination from "react-js-pagination" import { useAlert } from 'react-alert' function Products({ match }) {
}
export default Products
the Pagination links are failing to switch and its only showing 1st prev next and last...1 and 2 are not there