Javascript Paginação de dados de uma API usando Reactjs

[thefill]

Fiz um projeto em ReactJs que consome uma determinada API e mostra os dados dessa API, esse projeto está no Codesandbox.io se quiserem ver vou deixar o link aqui.

Lá no projeto eu fiz os importes necessário para aplicação, como vocês podem ver aqui em baixo:

 

  

 

Após isso fiz a chamada para a API com axios, assim:

 

 

Depois eu fiz a renderização dessa forma aqui:

 

render() {
    return (
      <Container fluid>
        <Row>
          <Col>
            <div className="grid">
              {this.state.posts.map((post) => (
                <Card
                  bg="dark"
                  key={post.id}
                  style={{ width: "18rem", color: "#fff" }}
                  className="mb-2"
                >
                  <Card.Header>Header</Card.Header>
                  <Card.Body>
                    <Card.Title>{post.title}</Card.Title>
                    <Card.Text>{post.body}</Card.Text>
                  </Card.Body>
                </Card>
              ))}
            </div>
          </Col>
        </Row>
        <Row>
          <Col>
            <Pagination>
              <Pagination.First />
              <Pagination.Prev />
              <Pagination.Item>{1}</Pagination.Item>
              <Pagination.Ellipsis />

              <Pagination.Item>{11}</Pagination.Item>
              <Pagination.Item active>{12}</Pagination.Item>
              <Pagination.Item>{13}</Pagination.Item>

              <Pagination.Ellipsis />
              <Pagination.Item>{20}</Pagination.Item>
              <Pagination.Next />
              <Pagination.Last />
            </Pagination>
          </Col>
        </Row>
      </Container>
    );
  }

 

O resultado é esse:

 

 

Como vocês puderam ver, a API me retorna muita coisa, eu gostaria de dividir essa resposta da API, mostrando apenas um determinado numero de posts por pagina. La em baixo, no final da pagina, eu coloquei o sistema de paginação que eu vi no Bootstrap:

 

 

Essa parte do Bootstrap é só o HTML, ela não está funcionando, é por isso que venho aqui no fórum pedir ajuda a vocês para solucionar esse problema.

Eu já fiz alguns testes antes de vim pedir ajuda, mas nada deu certo, tentei também procurar exemplos na internet mas eles mais me confundem do que me ajudam.

Então é isso, quem puder me ajudar eu agradeço.

[Rui Guilherme]

Acredito que a uma boa prática a ser feita, não é tratar a quantidade no ReactJS, mas sim na API.

 

No axios você vai passar os seguintes parametros get: https://jsonplaceholder.typicode.com/posts?_start=0&_limit=10 

 

Isso vai te retornar apenas os itens dos index 0 ao 10, dai na paginação você pode colocar um evento que muda os valores do _start=0, exemplo:
Clicou na página 1? Carrega 10 index iniciando do 0(_start=0)

Clicou na página 2? Carrega 10 index iniciando do 20(_start=10)

 

Exemplo pratico - OBSERVE AS ID'S DOS ITENS:

(fiz usando o fetch porque consigo executar direto pelo console do navegador, PORÉM RECOMENDO O AXIOS.)

 

Código: (Página 1)

fetch('https://jsonplaceholder.typicode.com/posts?_start=0&_limit=10')
  .then((response) => response.json())
  .then((json) => console.log(json));

 

Saida: (Página 1)

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  },
  {
    "userId": 1,
    "id": 4,
    "title": "eum et est occaecati",
    "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
  },
  {
    "userId": 1,
    "id": 5,
    "title": "nesciunt quas odio",
    "body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
  },
  {
    "userId": 1,
    "id": 6,
    "title": "dolorem eum magni eos aperiam quia",
    "body": "ut aspernatur corporis harum nihil quis provident sequi\nmollitia nobis aliquid molestiae\nperspiciatis et ea nemo ab reprehenderit accusantium quas\nvoluptate dolores velit et doloremque molestiae"
  },
  {
    "userId": 1,
    "id": 7,
    "title": "magnam facilis autem",
    "body": "dolore placeat quibusdam ea quo vitae\nmagni quis enim qui quis quo nemo aut saepe\nquidem repellat excepturi ut quia\nsunt ut sequi eos ea sed quas"
  },
  {
    "userId": 1,
    "id": 8,
    "title": "dolorem dolore est ipsam",
    "body": "dignissimos aperiam dolorem qui eum\nfacilis quibusdam animi sint suscipit qui sint possimus cum\nquaerat magni maiores excepturi\nipsam ut commodi dolor voluptatum modi aut vitae"
  },
  {
    "userId": 1,
    "id": 9,
    "title": "nesciunt iure omnis dolorem tempora et accusantium",
    "body": "consectetur animi nesciunt iure dolore\nenim quia ad\nveniam autem ut quam aut nobis\net est aut quod aut provident voluptas autem voluptas"
  },
  {
    "userId": 1,
    "id": 10,
    "title": "optio molestias id quia eum",
    "body": "quo et expedita modi cum officia vel magni\ndoloribus qui repudiandae\nvero nisi sit\nquos veniam quod sed accusamus veritatis error"
  }
]

 

Código: (Página 2)

fetch('https://jsonplaceholder.typicode.com/posts?_start=10&_limit=10')
  .then((response) => response.json())
  .then((json) => console.log(json));

 

Saída: (Página 2)

[
  {
    "userId": 2,
    "id": 11,
    "title": "et ea vero quia laudantium autem",
    "body": "delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibus\naccusamus in eum beatae sit\nvel qui neque voluptates ut commodi qui incidunt\nut animi commodi"
  },
  {
    "userId": 2,
    "id": 12,
    "title": "in quibusdam tempore odit est dolorem",
    "body": "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio"
  },
  {
    "userId": 2,
    "id": 13,
    "title": "dolorum ut in voluptas mollitia et saepe quo animi",
    "body": "aut dicta possimus sint mollitia voluptas commodi quo doloremque\niste corrupti reiciendis voluptatem eius rerum\nsit cumque quod eligendi laborum minima\nperferendis recusandae assumenda consectetur porro architecto ipsum ipsam"
  },
  {
    "userId": 2,
    "id": 14,
    "title": "voluptatem eligendi optio",
    "body": "fuga et accusamus dolorum perferendis illo voluptas\nnon doloremque neque facere\nad qui dolorum molestiae beatae\nsed aut voluptas totam sit illum"
  },
  {
    "userId": 2,
    "id": 15,
    "title": "eveniet quod temporibus",
    "body": "reprehenderit quos placeat\nvelit minima officia dolores impedit repudiandae molestiae nam\nvoluptas recusandae quis delectus\nofficiis harum fugiat vitae"
  },
  {
    "userId": 2,
    "id": 16,
    "title": "sint suscipit perspiciatis velit dolorum rerum ipsa laboriosam odio",
    "body": "suscipit nam nisi quo aperiam aut\nasperiores eos fugit maiores voluptatibus quia\nvoluptatem quis ullam qui in alias quia est\nconsequatur magni mollitia accusamus ea nisi voluptate dicta"
  },
  {
    "userId": 2,
    "id": 17,
    "title": "fugit voluptas sed molestias voluptatem provident",
    "body": "eos voluptas et aut odit natus earum\naspernatur fuga molestiae ullam\ndeserunt ratione qui eos\nqui nihil ratione nemo velit ut aut id quo"
  },
  {
    "userId": 2,
    "id": 18,
    "title": "voluptate et itaque vero tempora molestiae",
    "body": "eveniet quo quis\nlaborum totam consequatur non dolor\nut et est repudiandae\nest voluptatem vel debitis et magnam"
  },
  {
    "userId": 2,
    "id": 19,
    "title": "adipisci placeat illum aut reiciendis qui",
    "body": "illum quis cupiditate provident sit magnam\nea sed aut omnis\nveniam maiores ullam consequatur atque\nadipisci quo iste expedita sit quos voluptas"
  },
  {
    "userId": 2,
    "id": 20,
    "title": "doloribus ad provident suscipit at",
    "body": "qui consequuntur ducimus possimus quisquam amet similique\nsuscipit porro ipsam amet\neos veritatis officiis exercitationem vel fugit aut necessitatibus totam\nomnis rerum consequatur expedita quidem cumque explicabo"
  }
]

 

Com isso você consegue renderizar a página com os novos valores.

 

Dica: Eu observei que você está usando Classes no React. Eu acho que a Facebook deveria abandonar classes e deixar o suporte apenas para versões antigas do React, eu recomendo fortemente que você migre seu código para Hooks, o código fica mais simplificado, especialmente na hora de dar manutenção.

https://reactjs.org/docs/hooks-intro.html

[thefill]

Muito obrigado@Rui Guilherme, deu certo!

 

14 horas atrás, Rui Guilherme disse:

Acredito que a uma boa prática a ser feita, não é tratar a quantidade no ReactJS, mas sim na API.

 

Eu estava tentando fazer isso, pegava os dados e dividia eles por variáveis, isso com certeza não é boa pratica 

E até mesmo as coisas que eu consegui achar na internet relacionada a isso nem uma delas falava sobre passar parâmetros na API.

 

14 horas atrás, Rui Guilherme disse:

No axios você vai passar os seguintes parametros get: https://jsonplaceholder.typicode.com/posts?_start=0&_limit=10 

 

Isso vai te retornar apenas os itens dos index 0 ao 10, dai na paginação você pode colocar um evento que muda os valores do _start=0, exemplo:
Clicou na página 1? Carrega 10 index iniciando do 0(_start=0)

Clicou na página 2? Carrega 10 index iniciando do 20(_start=10)

 

Exatamente isso, não achei nada relacionado a isso nas minhas pesquisas.

Meu forte não é muito back-end então essa é a primeira vez que eu tenho contato com isso.

Sabe dizer se precisa fazer algo de especifico na construção da API para que ela suporte esses parâmetros?

 

 

14 horas atrás, Rui Guilherme disse:

Dica: Eu observei que você está usando Classes no React. Eu acho que a Facebook deveria abandonar classes e deixar o suporte apenas para versões antigas do React, eu recomendo fortemente que você migre seu código para Hooks, o código fica mais simplificado, especialmente na hora de dar manutenção.

 

Valeu pela dica, já usei Hooks algumas vezes, mas quando se trata de variáveis, receber e mostrar dados eu prefiro utilizar classes por causa do state.

 

Muito obrigado mais uma vez @Rui Guilherme  tu é fera 

[Rui Guilherme]

19 horas atrás, thefill disse:

Valeu pela dica, já usei Hooks algumas vezes, mas quando se trata de variáveis, receber e mostrar dados eu prefiro utilizar classes por causa do state.

  eu n vivo sem o useState() do Hook... Caso você queira algo mais avançado para controlar o state da aplicação então você recomendo conhecer o ReduxJS.

ReduxJS é um pouco chato de começo, mas depois fica fácil, e controlar as coisas por ele ajuda de mais, o Reddit por exemplo usa o ReduxJS.

 

19 horas atrás, thefill disse:

Sabe dizer se precisa fazer algo de especifico na construção da API para que ela suporte esses parâmetros?

Sim, se você for montar uma API então iria precisar obter os dados da URL ou do BODY, aí no Select que você vai dar no banco de dados você colocar o valor que veio no URL/BODY e para isso você iria precisar entender o LIMIT do SQL

 

Porém, você n precisa quebrar a cabeça pensando nisso, essas coisas vêm naturalmente quando você está fazendo, foque em dominar o consumo de API's json.