Style Your Application Using Sass with React

Style Your Application Using Sass with React

Many CSS frameworks use Sass to generate their stylesheets. In this tutorial, I will show you how to integrate Zurb’s Foundation framework using Sass mixins.

When you are developing web applications with React, you know that writing the JavaScript code is only half of the story. The other half is implementing the design using style sheets. When your application becomes larger, using plain CSS style sheets can become tedious and unmaintainable. Sass is one of the most popular alternatives to CSS. It extends the CSS language with variables, mixins, and many other features. It also lets you divide up the style sheets into multiple files.

Sass source files come in two flavors. The older .sass format has now almost completely replaced by the .scss syntax. The latter is a superset of CSS and lets you paste existing CSS code into the SCSS file without problems. Sass compiles the SCSS source files into a single CSS file with the option of minifying the resulting output. The resulting file can be included in your web page just like any other CSS style sheet.

Many CSS frameworks use Sass to generate their stylesheets. In this tutorial, I will show you how to integrate Zurb’s Foundation framework using Sass mixins. Using this approach keeps the size of your CSS to a minimum. It also gives you the opportunity of more semantic markup.

Create Your React Application with Sass

You will be using the Create React App command-line tool to create the application. First of all, make sure that you have installed Node on your system with a version greater than 10. If you are unsure which Node version you have, open a terminal and run the following command.

node -v

Provided your Node version is up to date, the Create React App command-line tool can be run without any installation. In the terminal, navigate to a directory of your choice and run the following command.

npx create-react-app react-calculator

This will create a new folder, react-calculator initialize the React application and download all necessary packages. After a minute or two, once the process has finished, change into the new folder with the command below.

cd react-calculator

Set Up Authentication for Your React App

Any serious web application will need some sort of user authentication. Implementing your own not only takes time and effort but can also introduce security risks if you don’t know exactly what you are doing. Okta lets you set up authentication with just a few commands.

If you don’t already have an account with Okta, you need to register for a free account. Open your browser and navigate to https://developer.okta.com. Click on Create Free Account and complete the registration process.

Once you are done you can see your Okta developer dashboard. Click on Applications > Add Application to register a new application. On the next screen, choose Single Page App and click Next.

The following screen lets you edit the application’s settings. Under Allowed grant types, check the box Authorization Code. Then make sure that the port number is 3000. Change the base URI to http://localhost:3000/ and set the Login Redirect URI to http://localhost:3000/implicit/callback.

Once you are done, you will see a Client ID which you will need in a minute.

Set Up Authentication in Your React Sass App

Okta has created a tool to add authentication to React applications in seconds. It uses the Angular Schematics command-line tool to inject code into your skeleton application. Install the Schematics CLI on your system by running the following command in your terminal.

npm i -g @angular-devkit/[email protected]

TIP: Depending on your system, you might need to run this command using sudo.

You might be asking why I am telling you to use an Angular tool when you are developing a React application? It turns out that this tool is generic and works for Angular and Vue too! Not only that, but it even has support for Ionic and React Native!

Install OktaDev Schematics:

npm i -E @oktadev/[email protected]

Now, add Okta for authentication to your React application by running the command below.

schematics @oktadev/schematics:add-auth

You will be asked for your issuer’s URL. This can be found at API > Authorization Servers in your Okta dashboard. .

You will also need the application’s client ID which you received when earlier when setting up your application. Once the questions have been answered, the schematic will insert all the necessary code into your application to provide the authentication flow. Pretty neat, don’t you think?

Implement a React Calculator with Sass

Now it’s time to implement the calculator. This calculator is a nice demonstration of how to use stack operations to process user input and perform mathematical operations. The calculator has four basic operations +, -, *, and /, as well as a % button. It takes care of operator precedence.

Create a new file called src/Calculator.js and paste the following code into it.

import React from 'react';

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stack: ['='],
      display: '0'
    }
  }

  numberPressed(val) {
    const s = this.state;
    if (typeof s.stack[s.stack.length - 1] !== 'number') {
      s.display = val;
      s.stack.push(parseInt(s.display, 10));
    } else {
      s.display += val;
      s.stack[s.stack.length - 1] = parseInt(s.display, 10);
    }
    this.setState(s);
  }

  operatorPressed(val) {
    const s = this.state;
    const precedenceMap = {'+': 0, '-': 0, '*': 1, '/': 1};
    this.ensureNumber(s);
    const precedence = precedenceMap[val];
    let reduce = true;
    while (reduce) {
      let i = s.stack.length - 1;
      let lastPrecedence = 100;

      while (i >= 0) {
        if (typeof s.stack[i] === 'string') {
          lastPrecedence = precedenceMap[s.stack[i]];
          break;
        }
        i--;
      }
      if (precedence <= lastPrecedence) {
        reduce = this.reduceLast(s);
      } else {
        reduce = false;
      }
    }

    s.stack.push(val);
    this.setState(s);
  }

  equalPressed() {
    const s = this.state;
    this.ensureNumber(s);
    while (this.reduceLast(s)) {}
    s.stack.pop();
    this.setState(s);
  }

  percentPressed() {
    const s = this.state;
    this.ensureNumber(s);
    while (this.reduceLast(s)) {}
    const result = s.stack.pop() / 100;
    s.display = result.toString(10);
    this.setState(s);
  }

  acPressed() {
    const s = this.state;
    s.stack = ['='];
    s.display = '0';
    this.setState(s);
  }

  cePressed() {
    const s = this.state;
    if (typeof s.stack[s.stack.length - 1] === 'number') { s.stack.pop(); }
    s.display = '0';
    this.setState(s);
  }

  ensureNumber(s) {
    if (typeof s.stack[s.stack.length - 1] === 'string') {
      s.stack.push(parseInt(s.display, 10));
    }
  }

  reduceLast(s) {
    if (s.stack.length < 4) { return false; }
    const num2 = s.stack.pop();
    const op = s.stack.pop();
    const num1 = s.stack.pop();
    let result = num1;
    switch (op) {
      case '+': result = num1 + num2;
        break;
      case '-': result = num1 - num2;
        break;
      case '*': result = num1 * num2;
        break;
      case '/': result = num1 / num2;
        break;
      default:
    }
    s.stack.push(result);
    s.display = result.toString(10);
    return true;
  }

  render() {
    return (
      <div className="calculator-container">
        <div className="calculator">
          <p className="display">{this.state.display}</p>
          <div className="calculator-buttons">
            <button className="reset-button" onClick={this.acPressed.bind(this)}>AC</button>
            <button className="reset-button" onClick={this.cePressed.bind(this)}>CE</button>
            <button className="operator-button" onClick={this.percentPressed.bind(this)}>%</button>
            <button className="operator-button" onClick={this.operatorPressed.bind(this, '/')}>÷</button>
            <button className="number-button" onClick={this.numberPressed.bind(this, '7')}>7</button>
            <button className="number-button" onClick={this.numberPressed.bind(this, '8')}>8</button>
            <button className="number-button" onClick={this.numberPressed.bind(this, '9')}>9</button>
            <button className="operator-button" onClick={this.operatorPressed.bind(this, '*')}>x</button>
            <button className="number-button" onClick={this.numberPressed.bind(this, '4')}>4</button>
            <button className="number-button" onClick={this.numberPressed.bind(this, '5')}>5</button>
            <button className="number-button" onClick={this.numberPressed.bind(this, '6')}>6</button>
            <button className="operator-button" onClick={this.operatorPressed.bind(this, '-')}>-</button>
            <button className="number-button" onClick={this.numberPressed.bind(this, '1')}>1</button>
            <button className="number-button" onClick={this.numberPressed.bind(this, '2')}>2</button>
            <button className="number-button" onClick={this.numberPressed.bind(this, '3')}>3</button>
            <button className="operator-button" onClick={this.operatorPressed.bind(this, '+')}>+</button>
            <button className="number-button" onClick={this.numberPressed.bind(this, '0')}>0</button>
            <button className="number-button" onClick={this.numberPressed.bind(this, '.')}>.</button>
            <button className="equal-button" onClick={this.equalPressed.bind(this)}>=</button>
          </div>
        </div>
        <div className="calculator-stack">
          <h4>Stack</h4>
          <table>
            <tbody>
              {this.state.stack.map(el => (<tr><td>{el}</td></tr>))}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default Calculator;

You can see that the HTML of the calculator consists of groups of buttons. Each button is linked to a callback function in the Calculator class. To give you an insight into what the stack contains at any time, a separate div contains a table displaying the stack entries.

Now open src/Home.js and remove the import of logo.svg. Add the following import to the top of the file.

import Calculator from './Calculator';

Further down in the file, replace the render() function with the following.

render() {
  const {authenticated} = this.state;
  let body = null;
  if (authenticated) {
    body = (
      <div className="page-body">
        <div className="login-buttons">
          <button onClick={this.logout}>Logout</button>
        </div>
        <Calculator></Calculator>
      </div>
    );
  } else {
    body = (
      <div className="page-body">
        <div className="login-buttons">
          <button onClick={this.login}>Login</button>
        </div>
      </div>
    );
  }

  return (
    <div className="App">
      <h1>Calculator</h1>
      {body}
    </div>
  );
}

Cool! The calculator should be functional. If you run npm start, you should be able to open your browser at http://localhost:3000 and see a Login button. After logging in you will be able to use the calculator. But we haven’t styled it yet, so it won’t look nice.

Style Your Calculator in React With Sass

Back in the days when CSS was all the rage, it came with a promise of a bright future where content and style were completely separated. Your HTML code would only contain the actual content and the markup would be completely semantic. One of the promises was that class names would only relate to the meaning of the content and not the way that it was displayed on the screen.

Then along came CSS frameworks. They introduced CSS classes for creating a responsive grid layout, such as col-md-4. Other classes determined the size of buttons, such as btn-sm. While incredibly useful, this broke the separation of content and design.

Using Sass together with the Foundation CSS framework, it is possible to regain this strict separation. You might have noticed in the code above, that I have used semantic className attributes. The classes tell you what is contained in a div and not how it should be shown on the screen. This actually has an accessibility advantage because screen readers can group the contents in a meaningful way.

To get started with Sass and Foundation, install two more packages. In the terminal run the following command.

npm i -E [email protected] [email protected]

There are actually two Sass packages available through npm. node-sass is generally faster but does require a compilation step during installation. I have opted for the more compatible sass package which is a pure JavaScript implementation of the Sass language.

Copy the default settings from the Foundation folder to your src/ folder by running the following command in a terminal.

cp node_modules/foundation-sites/scss/settings/_settings.scss src/

Now open src/_settings.scss and, and change line 63 (@import 'util/util';) to the following:

@import '~foundation-sites/scss/util/util';

If you look through the settings file, you can see that it defines a huge number of Sass variables. Foundation is highly customizable but the default settings provide a good starting point. Now rename src/App.css to src/App.scss and replace its content with the following.

@import 'settings';
@import '~foundation-sites/scss/foundation';

.App {
  text-align: center;
  @include xy-grid-container;
}

.login-buttons {
  display: flex;
  justify-content: flex-end;

  button {
    @include button;
  }
}

.calculator-container {
  @include xy-grid;
}

.calculator {
  @include xy-cell(12);
  @include breakpoint(medium) {
    @include xy-cell(6);
    @include xy-cell-offset(2);
  }

  .display {
    background-color: $light-gray;
    font-size: 48px;
    padding: 8px;
    overflow: hidden;
  }

  .calculator-buttons {
    @include xy-grid-layout(4, 'button');
  }

  button {
    @include button;

    &.reset-button {
      @include button-style($warning-color, auto, auto);
    }

    &.number-button {
      @include button-style($secondary-color, auto, auto);
    }

    &.equal-button {
      width: calc(50% - 1.25rem);
    }
  }
}

.calculator-stack {
  @include xy-cell(12);
  @include breakpoint(medium) {
    @include xy-cell(2);
    @include xy-cell-offset(1);
  }
}

table {
  @include table;
}

In this style sheet, I have used a number of Sass features. I have used a number of @include statements to include mixins from the Foundation framework.

For example @include xy-cell(6); will add styles to the surrounding class to turn it into a 6 column wide cell. Note also, how I have used the $warning-color and $secondary-color variables to define the button style of the reset and the number buttons.

These variables are defined in the src/_settings.scss file. If you want to learn more about the Sass language, the official documentation is a good starting point.

How I Theme My React App With Sass is a good tutorial that teaches you more about the power of mixins.

To include the stylesheet in your application, open Home.js and change the import of App.css to the following.

import './App.scss';

The React scripts installed by the create-react-app command use webpack to compile and package everything. By default, they also install the module loaders for .scss files. By changing the import above, everything should now work out of the box without any further configuration. Simply run the following command and your perfectly styled calculator will be available on http://localhost:3000.

npm start

Congratulations, you should now see something like this in your browser.

Learn More About React and Sass

In this tutorial, you learned how to use Sass in a React application. Using the create-react-app command makes it extremely easy to include Sass without any further configuration needed. I also showed you how to achieve truly semantic markup in your application while still using a powerful CSS framework. In this tutorial, I used Zurb’s Foundation as an example. You can achieve a similar effect when using the Bootstrap framework.

You can find the source code for this tutorial on GitHub in the oktadeveloper/okta-react-sass-example repository.

Programming a Javascript Simon Game Tutorial

Programming a Javascript Simon Game Tutorial

In this javascript tutorial, I recorded myself live programming an html5 javascript simon game.

In this javascript tutorial, I recorded myself live programming an html5 javascript simon game.

For those who don't know, I'm a full stack web developer who has been in the industry for over 5 years now. There is a lot of things I have learned along the way and I'd like to share that knowledge with anyone wanting to learn!

like this video if you found it useful and would like to see more videos of the same content.

subscribe to my channel if you are trying to improve your abilities as a web developer, software engineer, or even if you are just learning to code.

Don't forget to turn on those bell notifications!

Understanding Memoization And Dynamic Programming in Javascript

Understanding Memoization And Dynamic Programming in Javascript

In this Javascript tutorial I will explain what memoization is, how to use it, when you should use memoization, how to use memoization, what dynamic programming is, how to use memoization in dynamic programming. Memoization is a big complicated word that you may have never even heard before, but you may be surprised to know that you are most likely already using memoization without even realizing it.

Memoization is a big complicated word that you may have never even heard before, but you may be surprised to know that you are most likely already using memoization without even realizing it. Memoization is just the act of caching values so that they can be calculated quicker in the future. Memoization is really useful in all parts of programming, but where it is most useful is in dynamic programming. In this video I will explain what memoization is, how to use it, and why it is so useful especially in dynamic programming.

🧠 Concepts Covered:

  • What memoization is
  • When you should use memoization
  • How to use memoization
  • What dynamic programming is
  • How to use memoization in dynamic programming

Pagination in ReactJs

Pagination in ReactJs

There are a lot of resourceful materials online that give good insights into pagination in ReactJs, as well as NPM packages you can easily use

There are a lot of resourceful materials online that give good insights into pagination in ReactJs, as well as NPM packages you can easily use. As much as I appreciate those materials and love to use those packages, they mostly deal with loading the whole dataset on the page first then completely handle the pagination in the frontend. I am approaching this article with the concept of loading the exact data needed on the page, then manually loading other dataset based on the request when the user clicks the pagination number display. Below is the content structure to guide us through this article:

Table of Contents
  • Project Setup
  • HTML and CSS Styling
  • Pagination Data Format
  • Sample API request
  • Displaying the initial data
  • Showing Page Number and getting Other data
Project Setup

We are going to use create-react-app v0.1.0 which has the CSS Module configured already. Open your terminal and cd to the folder you want the project installed. Then run the below command:

npx create-react-app pagination  --use-npm

The above command will download the project into the folder calledpagination. You need to cd into the folder and run npm start. If everything goes well, you will have a page that looks like below:

HTML and CSS Styling

Open the project in your favorite code editor and locate the App.js file, We need to prepare our App.js to the look exactly like the way we want it by adding the HTML code and CSS style below:

Create a new file called App.module.css in the same directory where you have your App.js, then import it into your App.js using:

import styles from './App.module.css';

I want us to handle the display of the pagination number first, below is the style and HTML structure of what we are going to use.

  render() {
    

    return (
      <div className={styles.app}>
        
        <table className={styles.table}>
          <thead>
            <tr>
              <th>S/N</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
              <tr>
                <td>1</td>
                <td>Abel</td>
                <td>Agoi</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Muyiwa</td>
                <td>Aregbesola</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Opeyemi</td>
                <td>Agoi</td>
              </tr>
              <tr>
                <td>4</td>
                <td>Ope</td>
                <td>Aina</td>
              </tr>
          </tbody>
        </table>


        <div className={styles.pagination}>
          <span>&laquo;</span>
          <span className={styles.active}>1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
        </div>

      </div>
    );
  }

pagination_01.js

Add the content below into your App.module.css.

.app {
    width: 50%;
    margin: 0 auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0; 
}


table {
  border-collapse: separate;
  border-spacing: 0;
  color: #4a4a4d;
  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 100%;
}
tr {
  overflow-x: scroll;
}
th,
td {
  padding: 15px 15px;
  vertical-align: middle;
  /* text-align: left; */
}
thead {
  font-size: 14px;
  line-height: 24px;
  font-family: Lato;
  border: 1px solid transparent;

  max-width: 100%;
  font-weight: 900;
  line-height: 24px;
  mix-blend-mode: normal;

  color: rgba(51, 51, 51, .5);
  background: rgba(255, 255, 255, .9);
}
thead tr th {
  padding: 15px 15px;
  border: 1px solid transparent;


  text-align: left;
}
tbody {
  max-width: 100%;
}
tbody tr:nth-child(odd) {
  background: #f0f0f2;
}
tbody tr:hover {
  background: #f0f0f2;
}
td {
  padding: 15px 15px;
}
td:first-child {
}


.pagination {
    margin-top: 25px;
}
.pagination span {
  cursor: pointer;
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination span.active {
  background-color: #0099FF;
  color: white;
  border: 1px solid #0099FF;
}

pagination_app.module.css

Sorry for the plenty code written so far :), I want us to have a good looking table with pagination style in place before we move into the actual paging. If everything goes well, your view should look like below:

Pagination Data Format

In most cases, when you are making API calls to an endpoint that returns a paginated data, you need to pass at least the page number with the URL, hence a sample URL will look like below:

https://reqres.in/api/users?page=2

The most important thing to take note of in the URL above is the page=2 where 2 is the page number dataset we want to get. It can be 3,4 or any number as much as the dataset we have in the backend.

The response will always contain three important data which are per_page, total and the actual data we want to loop through. A sample response looks like below:

Sample API request

Talking about making an API request to the backend, We need a backend to make the request to, I decide to use https://reqres.in/ as the API endpoint for this tutorial because it is free, always available and reliable. You can decide to make your API request directly inside your component’s ComponentDidMount() or dispatch an action to redux from your ComponentDidMount() but for the purpose of this tutorial, we are going to make the API call from the App.js componentDidMount().

Firstly, we need to set the component’s state like below inside your App.js

  state = {
    users: null,
    total: null,
    per_page: null,
    current_page: null
  }

pagination_component_state.js

users is going to be the data we are going to loop over, while total and per_page is going to help us with calculating paging logic while the current_page will be used to style the active pagination link.

The next thing we should do is create a helper method that will serve the purpose of making an HTTP request to the API endpoint and also update the state with the response data. The method will look like below:

  makeHttpRequestWithPage = async pageNumber => {
    let response = await fetch(`https://reqres.in/api/users?page=${pageNumber}`, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    });

    const data = await response.json();

    this.setState({
      users: data.data,
      total: data.total,
      per_page: data.per_page,
      current_page: data.page,
    });
  }

pagination_http_request.js

This method will accept a parameter called pageNumber so it can be reusable and will always update the state with the right data when the response is successful.

Since on page load, we need to make the HTTP request to the backend, and we are going to do this inside thecomponentDidMount() by calling the method above and passing it the first-page number we want which should be 1. Hence, the componentDidMount() will look like below:

 componentDidMount() {
    this.makeHttpRequestWithPage(1);
  }

pagination_componentDidMount.js

If we add console.dir(this.state.users) inside the render() method, below will be printed in the console

The null was before the data arrived, once the data arrived, it updates the state, hence the array of users data.

Displaying the initial data

Haven gotten the data needed, we need to loop through the data and display it. Hence we can update our render method to have below:

    let users;

    if (this.state.users !== null) {
      users = this.state.users.map(user => (
        <tr key={user.id}>
          <td>{user.id}</td>
          <td>{user.first_name}</td>
          <td>{user.last_name}</td>
        </tr>
      )); 
    }
    
    return (
      <div className={styles.app}>
        
        <table className={styles.table}>
          <thead>
            <tr>
              <th>S/N</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
              { users }
          </tbody>
        </table>


        <div className={styles.pagination}>
          <span>&laquo;</span>
          <span className={styles.active}>1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>&raquo;</span>
        </div>

      </div>
    );

gistfile1.txt

I replaced the dummy data we had inside the with the result of the loop which I equated to users. We have the assurance that when the state changes, ReactJs will automatically update the content of the table. The final stage is displaying the page logic and getting the other contents based on the page number clicked which will be sent to the API endpoint.

Showing Page Number and getting other data

Before we talk about showing page number automatically using the desired logic, I want us to manually show those numbers and make the actual API calls when the numbers are clicked. For now, we are going to hard code the pagination numbers ourselves like below:

<div className={styles.pagination}>
  <span onClick={() => this.makeHttpRequestWithPage(1)}>1</span>
  <span onClick={() => this.makeHttpRequestWithPage(2)}>2</span>
  <span onClick={() => this.makeHttpRequestWithPage(3)}>3</span>
  <span onClick={() => this.makeHttpRequestWithPage(4)}>4</span>
</div>

pagination_hard_code.js

The above code will look like below when previewed in the browser.

Notice that each span has an event handler attached to it, and I passed the page number to that event handler, so anytime we click on the pagination link, it will make a new HTTP request and update the component states, hence the user’s table data. We do not want to hard-code the links as we did above, so we need to automatically display those links.

So we’re planning on showing the page numbers for a series of pieces of data so that users can easily navigate multiple items. There are a few things that we need to know first:

  • The page that we’re on
  • Total number of items
  • Number of items per page

Good news is that we have captured all these things in our component’s state.

Next, we need to look at how we want to display the page numbers, there is a wide range of methods that people use:

  • Simple Next/Previous buttons with no numbers
  • A list of all possible pages
  • Page 1 & the last page, with the current page (and 2 above/below) shown

I personally prefer to show the very first page, that last page, and then the current page with 2 pages above & below. So for example on page 12 out of 24 pages we’d see:

1, 10, 11, 12, 13, 14, 24

This allows users to quickly navigate to the start, and to the end, as well as jump through multiple pages at once. For the purpose of this tutorial, I am going to show us how to show a list of all possible pages(item two above) then item three too.

The Arithmetic

We need to work out the total number of pages, for this, we want to take the total number of items that there are, and divide it by the number of items per page. But we want to make sure that we take that number and round it up.

So if there were 12 items in total, and we were showing 5 per page, we’d have a total of 3 pages of items. If we were to show 3 per page, we’d show 4 pages.

const pageNumbers = [];
for (let i = 1; i <= Math.ceil(this.state.meta.total / this.state.meta.per_page); i++) {
    pageNumbers.push(i);
}

page_logic_pagination.js

Haven gotten the page numbers, we need to loop through to display the span since we want to show all possible numbers first, our loop will look like below:

renderPageNumbers = pageNumbers.map(number => {
  let classes = this.state.current_page === number ? styles.active : '';

  return (
    <span key={number} className={classes} onClick={() => this.makeHttpRequestWithPage(number)}>{number}</span>
  );
});

pagination_all_numbers_loop.js

We need to update our pagination view to look like below:

<div className={styles.pagination}>
  <span onClick={() => this.makeHttpRequestWithPage(1)}>&laquo;</span>
  {renderPageNumbers}
</div>

pagination_view._01js

Congrats, we have successfully handle pagination, make HTTP request to the backend and changing the table content when user click on the page number to see.

To be sure we are on the same page, my App.js code looks like below:

import React, { Component } from 'react';
import styles from './App.module.css';

class App extends Component {


  state = {
    users: null,
    total: null,
    per_page: null,
    current_page: 1
  }


  componentDidMount() {
    this.makeHttpRequestWithPage(1);
  }


  makeHttpRequestWithPage = async pageNumber => {
    const response = await fetch(`https://reqres.in/api/users?page=${pageNumber}`, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    });

    const data = await response.json();

    this.setState({
      users: data.data,
      total: data.total,
      per_page: data.per_page,
      current_page: data.page
    });
  }


  render() {

    let users, renderPageNumbers;

    if (this.state.users !== null) {
      users = this.state.users.map(user => (
        <tr key={user.id}>
          <td>{user.id}</td>
          <td>{user.first_name}</td>
          <td>{user.last_name}</td>
        </tr>
      ));
    }

    const pageNumbers = [];
    if (this.state.total !== null) {
      for (let i = 1; i <= Math.ceil(this.state.total / this.state.per_page); i++) {
        pageNumbers.push(i);
      }


      renderPageNumbers = pageNumbers.map(number => {
        let classes = this.state.current_page === number ? styles.active : '';

        return (
          <span key={number} className={classes} onClick={() => this.makeHttpRequestWithPage(number)}>{number}</span>
        );
      });
    }

    return (


      <div className={styles.app}>

        <table className={styles.table}>
          <thead>
            <tr>
              <th>S/N</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
            {users}
          </tbody>
        </table>


        <div className={styles.pagination}>
          <span onClick={() => this.makeHttpRequestWithPage(1)}>&laquo;</span>
          {renderPageNumbers}
          <span onClick={() => this.makeHttpRequestWithPage(1)}>&raquo;</span>
        </div>

      </div>
    );
  }

}

export default App;

pagination_app.js

and my view like below:

We can change the page number display logic to below since it will accommodate for large dataset.

renderPageNumbers = pageNumbers.map(number => {
  let classes = this.state.current_page === number ? styles.active : '';

  if (number == 1 || number == this.state.total || (number >= this.state.current_page - 2 && number <= this.state.current_page + 2)) {
    return (
      <span key={number} className={classes} onClick={() => this.makeHttpRequestWithPage(number)}>{number}</span>
    );
  }
});

pagination_another_display_logic.js

Thanks for reading.