Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

164
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda