Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

163
Views
How to add pagination with API in reactstrap?

I'm confused how to add pagination with get data from api using reactstrap.

I have response like this:

{

current_page: 1

detail: [,…]

first_page_url: "dashboard/greatflashsale/?page=1"

from: 1

last_page: 2

last_page_url: "dashboard/greatflashsale/?page=2"

next_page_url: "dashboard/greatflashsale/?page=2"

path: "dashboard/greatflashsale/"

per_page: 10

prev_page_url: null

to: 10

total:15

}

and this is my code:

const FlashData = () => {
  const dispatch = useDispatch()
  const [page, setPage] = useState(1)
  const { flashSale } = useSelector((state) => state.data)

    useEffect(() => {
        dispatch(getdata(page))
    }, [dispatch])

   return(
   <>
     /*some code here...*/

     <div className="pagin">
      <Pagination>
       <PaginationItem>
         <PaginationLink
           first
           href={flashSale.first_page_url}
           />
         </PaginationItem>
       <PaginationItem>
        <PaginationLink
           href={flashSale.prev_page_url}
           previous
           />
       </PaginationItem>
       <PaginationItem>
        <PaginationLink href="#">
          1
        </PaginationLink>
       </PaginationItem>
       <PaginationItem>
        <PaginationLink href="#">
          2
        </PaginationLink>
       </PaginationItem>
       <PaginationItem>
        <PaginationLink href="#">
          3
        </PaginationLink>
       </PaginationItem>
       <PaginationItem>
        <PaginationLink href="#">
          4
        </PaginationLink>
       </PaginationItem>
       <PaginationItem>
        <PaginationLink href="#">
          5
        </PaginationLink>
       </PaginationItem>
       <PaginationItem>
        <PaginationLink
          href={flashSale.next_page_url}
          next
          />
       </PaginationItem>
       <PaginationItem>
        <PaginationLink
          href={flashSale.last_page_url}
          last
          />
        </PaginationItem>
     </Pagination>
    </div>
   </>
 )
}

I didn't find the answer in some forums

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!