React fetching and pagination

Question

I'm trying to make app with fetching and pagination, on one page there is supposed to be 12 elements, So far I have achieved something, there is 12 elements and I can see next page and previous, but I wish to achieve to see number of pages and then be able to for example jump from 1st page to 3rd etc, does anyone has idea how to do it? My code:

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      photos: [],
      thumbnailUrl: '',
      visible: 0,
      nextVisible: 12,
      error: ''
    }
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/photos')
      .then(response => response.json())
      // .then(json => console.log(json))
      .then(resp => {
        this.setState({
          photos: resp,
        })
      })

  }

  loadMore() {
    this.setState((prev) => {
      return {
        visible: prev.visible + 12,
        nextVisible: prev.nextVisible + 12,
        error: ''
      }
    })
  }
  loadLess() {
    if (this.state.nextVisible > 12) {
      this.setState((prev) => {
        return {
          visible: prev.visible - 12,
          nextVisible: prev.nextVisible - 12,
        }
      })
    } else {
      this.setState({
        error: 'you are on first page'
      })
    }
  }

  render() {

    return (
      <div>
        <Grid>
          <Row>
            <Col md={6}>
          {this.state.photos.slice(this.state.visible, this.state.nextVisible).map((e, i) =>
                <ColumnFirst
                  title={e.title}
                  thumbnailUrl={e.thumbnailUrl}
                  key={i}
                />
              )}

              <button onClick={e => this.loadLess(e)}>Previous Page</button>
              <button onClick={e => this.loadMore(e)}>Next Page</button>
              <p>{this.state.error}</p>

            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

export default App;

EDIT: I tried to use react-js-pagination but except this that I can see number of pages below, nothing happens when I change page, I mean I know how to write a function to see next 12 pages or previous ones. But somehow I don't have any clue how to somehow let app calculate and show me elements on particular page

handlePageChange(pageNumber) {
    console.log(`active page is ${pageNumber}`);
    this.setState({ activePage: pageNumber });
  }

<Col md={6}>

              {this.state.photos.slice(this.state.visible, this.state.nextVisible).map((e, i) =>
                <ColumnFirst
                  title={e.title}
                  thumbnailUrl={e.thumbnailUrl}
                  key={i}
                />
              )}
              <Pagination
                activePage={this.state.activePage}
                itemsCountPerPage={this.state.nextVisible}
                totalItemsCount={this.state.photos.length}
                pageRangeDisplayed={5}
                onChange={e => this.handlePageChange(e)}

              />
              <button onClick={e => this.loadLess(e)}>Previous Page</button>
              <button onClick={e => this.loadMore(e)}>Next Page</button>
              <p>{this.state.error}</p>

            </Col>

Answer 1

You can use ant design table to solve the issue, I have created a sandbox here https://codesandbox.io/s/6yz87n6wn please refer to the code snippet below

import React, { Component } from "react";
import axios from "axios";
import { Table } from "antd";

const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "Album Id",
    dataIndex: "albumId",
    key: "albumId"
  },
  {
    title: "Title",
    dataIndex: "title",
    key: "title"
  }
];
class AntTable extends Component {
  state = {};
  componentDidMount() {
    axios("https://jsonplaceholder.typicode.com/photos").then(resp => {
      this.setState({
        data: resp.data
      });
    });
  }
  render() {
    return (
      <div>
        Hello
        <Table columns={columns} dataSource={this.state.data} />
      </div>
    );
  }
}

export default AntTable;

Cheers!

Answer 2

I just had an issue with this myself. I took the cowards way out and just used React-Paginate :).

The npm page for it is here. If the link breaks in the future for whatever reason just search "react-paginate".

The github page for it is here. If the link breaks in the future just search for "AdeleD" on github and look for the react-paginate repo. The documentation is okay. You really just need to walk through the demo/js/demo.js file as stated in the read me section and you should be good to go.

This does not answer your question. But, hopefully it provides you with an alternate route in case you can't find a solution in time. Good luck!