How to implement pagination on frontend in ReactJS?

Question

I have made cricket web app using ReactJS, NodeJS, MongoDB. On frontend I am displaying data from JSON objects per page I want to display 16 JSON objects. I am using .slice(0,16) method to slice JSON objects from REST API which returns 577 objects. Now how can I implement pagination for page 2,3,4,5.

For page 2 -> slice(17,33) For page 3 -> slice(34,49) and so on...

Below is my code and screenshot of my webapp:

in content.js :

import React, { Component } from 'react';
import './content.css';

class Content extends Component {
    constructor(props){
        super(props);
        this.state = {
            matches:[],
            loading:true
        };
    }

    componentDidMount(){
        fetch('api/matches')
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        matches:res.slice(0,16),
        loading:false
      })
    })
    }

    renderMatches() {
        return this.state.matches.map(match => {
            return (
                <div class="col-lg-3">
                    <div id="content">
                        <p class="match">MATCH {match.id}</p>
                        <h4>{match.team1}</h4>
                        <p>VS</p>
                        <h4>{match.team2}</h4>
                        <div class="winner">
                            <h3>WINNER</h3>
                            <h4>{match.winner}</h4>
                        </div>
                        <div class="stats">
                            <button type="button" class="btn btn-success">View Stats</button>
                        </div>
                    </div>
                </div>
            );
        })
    }

    render() {

        if (this.state.loading) {
            return <div>>Loading...</div>
        }

    return (
      <div>
          <div class="row">
            {this.renderMatches()}
          </div>
      </div>
    );
  }
}

export default Content;

In Pagination.js :

import React, { Component } from 'react';

class Pagination extends Component {

  render() {
    return (
      <div>
          <div class="container">
              <h2>Pagination</h2>
              <p>The .pagination class provides pagination links:</p>                  
              <ul class="pagination">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
              </ul>
          </div>
      </div>
    );
  }
}

export default Pagination;

Screenshot for more clarity : enter image description here

nbkhope · Accepted Answer · 2018-01-24 18:20:50Z

How about store all the matches in the component state and only slice during rendering, based on the page query string?

In componentDidMount(), after fetching the data, simply set the state with all the matches:

  this.setState({
    matches: res,
  })

Then, given you want to control the pagination with a query string in the url, like:

?page=2

You can filter the matches in render():

const RECORDS_PER_PAGE = 16;
const page = parseInt(getPageNumber(), 10) || 1; // defaults to 1 if no page query specified
const offset = (page - 1) * RECORDS_PER_PAGE

// do your mapping (do this in your renderMapping() method)
const matchComponents = this.state.matches.slice(0 + offset, RECORDS_PER_PAGE + offset).map(/* ... */);

where getPageNumber() is a method that gives you the query string value for page:

// Use your own query string parser if you wish
getPageNumber() {
  return window.location.search // <-- gives you access to the query parameters
  .slice(1) // remove the `?`
  .split("&")
  .reduce((queryHash, queryParam) => {

    // e.g. ?page=3 becomes ["page", "3"]
    const query = queryParam.split('=');
    return Object.assign({}, queryHash, ({
      [query[0]]: query[1] || null
    }));

  }, {}).page;
}

Collectives™ on Stack Overflow

How to implement pagination on frontend in ReactJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related