src/components/Pagination.js

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';

class Pagination extends Component {
  constructor(props) {
    super(props);
    const { totalRecords = null, pageLimit = 30, pageNeighbours = 0 } = props;

    this.pageLimit = typeof pageLimit === 'number' ? pageLimit : 30;
    this.totalRecords = typeof totalRecords === 'number' ? totalRecords : 0;

    // pageNeighbours can be: 0, 1 or 2
    this.pageNeighbours = typeof pageNeighbours === 'number'
      ? Math.max(0, Math.min(pageNeighbours, 2))
      : 0;

    this.totalPages = Math.ceil(this.totalRecords / this.pageLimit);

    this.state = { currentPage: 1 };
  }
}

Pagination.propTypes = {
  totalRecords: PropTypes.number.isRequired,
  pageLimit: PropTypes.number,
  pageNeighbours: PropTypes.number,
  onPageChanged: PropTypes.func
};

export default Pagination;
Create a new Pagination.js file in the src/components directory:

nano src/components/Pagination.js
Note: If you use a utility library like Lodash in your project, then you can use the _.range() function provided by Lodash instead. The following code snippet shows the difference between the range() function you just defined and the one from Lodash:

range(1, 5); // returns [1, 2, 3, 4, 5]
_.range(1, 5); // returns [1, 2, 3, 4]
In the constructor() function, you compute the total pages as follows:

this.totalPages = Math.ceil(this.totalRecords / this.pageLimit);
src/components/CountryCard.js

import React from 'react';
import PropTypes from 'prop-types';
import Flag from 'react-flags';

const CountryCard = props => {
  const {
    cca2: code2 = '', region = null, name = {}
  } = props.country || {};

  return (
    <div className="col-sm-6 col-md-4 country-card">
      <div className="country-card-container border-gray rounded border mx-2 my-3 d-flex flex-row align-items-center p-0 bg-light">
        <div className="h-100 position-relative border-gray border-right px-2 bg-white rounded-left">
          <Flag country={code2} format="png" pngSize={64} basePath="./img/flags" className="d-block h-100" />
        </div>
        <div className="px-3">
          <span className="country-name text-dark d-block font-weight-bold">{ name.common }</span>
          <span className="country-region text-secondary text-uppercase">{ region }</span>
        </div>
      </div>
    </div>
  )
}

CountryCard.propTypes = {
  country: PropTypes.shape({
    cca2: PropTypes.string.isRequired,
    region: PropTypes.string.isRequired,
    name: PropTypes.shape({
      common: PropTypes.string.isRequired
    }).isRequired
  }).isRequired
};

export default CountryCard;

Recommend

How To Build Custom Pagination with React Step 3 — Creating the Pagination Component

How To Build Custom Pagination with React Step 2 — Creating the CountryCard Component

How To Build Custom Pagination with React Step 1 — Setting Up the Project

How To Use the WordPress One-Click Install on DigitalOcean Step 6 — Locating Logins and Passwords

How To Use the WordPress One-Click Install on DigitalOcean Step 3 — Accessing the Droplet via SSH to Enable Configuration

sudo mkswap /swapfile

How To Add Swap on CentOS 7 Tweak Your Swap Settings (Optional) Cache Pressure

How To Add Swap on CentOS 7 Tweak Your Swap Settings (Optional) Swappiness

How To Add Swap on CentOS 7 Make the Swap File Permanent

How To Add Swap on CentOS 7 Enable a Swap File

How To Add Swap on CentOS 7 Create a Swap File

How To Add Swap on CentOS 7 Check Available Storage Space

How To Add Swap on CentOS 7 Check the System for Swap Information

Cara Menginstal Nginx pada Ubuntu 20.04 Langkah 5 – Menyiapkan Blok Server (Disarankan)

Cara Menginstal Nginx pada Ubuntu 20.04 Langkah 4 – Mengelola Proses Nginx

Cara Menginstal Nginx pada Ubuntu 20.04 Langkah 3 – Memeriksa Server Web Anda

Cara Menginstal Nginx pada Ubuntu 20.04 Langkah 2 – Menyesuaikan Firewall

Cara Menginstal Nginx pada Ubuntu 20.04 Langkah 1 – Menginstal Nginx

Comment ajouter Swap sur Ubuntu 20.04 Étape 6 - Réglage de vos paramètres swap Ajuster le réglage de la pression du cache

Comment ajouter Swap sur Ubuntu 20.04 Étape 6 - Réglage de vos paramètres swap Ajuster la propriété du swappiness

Comment ajouter Swap sur Ubuntu 20.04 Étape 5 - Rendre le fichier swap permanent

Comment ajouter Swap sur Ubuntu 20.04 Étape 4 - Activer le fichier Swap

Comment ajouter Swap sur Ubuntu 20.04 Étape 3 - Créer d’un fichier swap

Comment ajouter Swap sur Ubuntu 20.04 Étape 2 - Vérifier de l’espace disponible sur la partition du disque dur

Comment ajouter Swap sur Ubuntu 20.04 Étape 1 - Vérification du système d’information sur les swaps

Cómo instalar Discourse en Ubuntu 18.04 Paso 3: Registrar una cuenta de administrador

Cómo instalar Discourse en Ubuntu 18.04 Paso 2: Configurar e iniciar Discourse

Cómo instalar Discourse en Ubuntu 18.04 Paso 1: Descargar Discourse

Initial Server Setup with CentOS 6 Step Six— Reload and Done!