Static vs Dynamic Type Checking in React

Static vs Dynamic Type Checking in React

The question of dynamic vs static data type checking in the world of JavaScript (and thus React) has been around for years now. And honestly, I don’t see a way for it to be finally resolved without taking external factors into account.

The question of dynamic vs static data type checking in the world of JavaScript (and thus React) has been around for years now. And honestly, I don’t see a way for it to be finally resolved without taking external factors into account.

Mind you, this is not about right vs wrong or having a sure way to always perform type checking correctly. In fact, it’s all about circumstances and personal preferences (i.e external factors).

Let me explain: In the context of React, type checking takes care of making sure your components are receiving the correct data types for their props.

Whatever the case is, in this article I’m going to be covering what both methods of performing type checking are and how you can achieve them in React.

Dynamic Type Checking with JavaScript

This particular brand of checking is meant to happen during execution time as opposed to beforehand (which is when static checking happens).

Considering the following working code, would you say JavaScript has the concept of data types at all?


let x = "world";
x = ["hello", x, "!"];
x = x.join(" ");
console.log(x) // hello world !

x.js

It might not have been obvious due to the duck-typing nature of the language, which allows for a level of mutability that makes it very easy to assume there are no types.

But there are and most importantly, there is dynamic type checking. You can see that when you try to add two variables (i.e when using the + operator). The result of that operation will have very different outcomes depending on the type of their values (i.e it’s not the same to add two strings than to try and add two numbers, or, why not, adding a string and a number).

And just to be clear: if you’re still thinking that the above behavior means “no types”, the actual result for a no-types system would be for the language to interpret all values in the same way, taking into account their numeric representation (after all, that’s what they are to the computer). So adding two strings, would result in a numeric value representing the addition of the bytes that comprise those strings. You could potentially later re-create a new string from that number, but of course, it wouldn’t be the concatenation you’d expect.

How useful is to depend on dynamic type checking then?

The upside to this type of checking is that there are no tools required to have it available in your projects. After all, JavaScript was built with it in mind.

Of course, there are other benefits to this behavior, such as:

  • Faster development type. Since devs don’t have to worry about carefully planning their types and the code to handle them, writing logic becomes a much natural task.
  • Easier-to-read code, as long as the developer builds it with readability in mind. Using the proper techniques you can write code that reads very naturally without having to go through 10 lines of types definition.

One could also argue that there is a downside to this approach as well, and just like with everything, it would be true. After all:

  • Careless or inexperienced developers are more prone to adding errors to their logic. These errors should be found during the testing stage, but alas, we’re not covering tests in this article.
  • Having the browser perform these types of checks during execution can take a toll on performance, after all, optimizing code that you can’t trust is not an easy thing to do (not to say there aren’t ways, they’re just harder to implement!).
  • Finally, a common problem you see with tooling surrounding dynamically typed languages, such as JavaScript, is their lack of proper help. It’s very hard to create an IDE that provides the level of intellisense (just to name a single feature here) for JavaScript that Eclipse provides for JAVA for example. It would be amazing if Sublime or even VS Code would do that, but unless you force that extra level of definition into your code (by specially formatted comments, for example), there is nothing they can do about it other than provide basic auto-complete.

To further showcase what I mean by careless developer-induced bugs, here is a very simple example:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);

  }

  handleChange(event) {
    let currYear = (new Date()).getFullYear()
    let age = currYear - event.target.value;
    
    this.setState({value: event.target.value, age: age});
  }

 

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Year of birth:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <h2>You're {this.state.age} years old</h2>
      </form>
    );
  }
}
ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);

simple-component.js

The component is very straightforward, and yes, not that accurate, but you get the basic gist of it. With this code, you can see how the browser’s engine is performing dynamic checks whenever you enter anything into the input field.

But what if you (or anyone else using your component) decides to input anything other than a number? If you don’t have control over the input, the user could be entering any type of content in the field, and thus, generating a NaN (whenever the entered value is not a number).

You can see how the rendered result can be affected by the user thanks to the devs relying on dynamic type checking.

So, what do we do if we want to improve on this? Thankfully, if you’re a React user, you’ll have access to PropTypes, a simple-to-use tool that’ll help you perform advanced dynamic type checking.

Using PropTypes in React

To get you started, the latest version of React have removed the PropTypes from its core code base and it can now be installed via npm:

$ npm install prop-types

You can also include it from one of the CDNs where it resides:

<!-- [UNPKG] development version -->
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<!-- [UNPKG] production version -->
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
<!-- [CDNJS] development version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
<!-- [CDNJS] production version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.min.js"></script>

If you go this route, the module will be available through window.PropTypes .

In any case, once installed, you can use it with your components by defining the static property propTypes , like so:

class CustomComponent extends React.Component {
  
  render (){
    return (
      <h2>Hello {this.props.name}!!</h2>  
    )
  }
}

CustomComponent.propTypes = {
  name: PropTypes.string.isRequired
}

prop.types2.js

In the example, you can see how we’re setting up the name prop to be a string and it needs to be present. If the validation fails, then an error will appear on the JavaScript console of your browser.


ReactDOM.render(
  <CustomComponent name={123} />,
  document.getElementById('root')
);

using-component.js

Using the component as shown above, will generate the following error:

You can use propTypes to define a lot of different validation types. You have your basic data types (i.e array, bool, func, object, number, string, and even symbol) but you also have more complex options such as checking the shape of an object, or if it’s an instance of a particular class. You can see the full list of options over here.

There is even the possibility to provide a custom validation function, as shown in the following example:

import React from "react";
import ReactDOM from "react-dom";


class Banner extends React.Component {

  render() {
    return (
      <h2>
       You're {this.props.age} years old
      </h2>
    )
  }
}
Banner.propTypes = {
  age: function(props, propName, compName) {
    let value = props[propName]
    if(isNaN(value)) {
      return new Error("Invalid age value")
    }
  }
}
class YearForm extends React.Component {
 
  constructor(props) {
    super(props);
    this.state = {age: 0, birthYear: 0}
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) { 
    let currYear = (new Date()).getFullYear()
    let age = currYear - event.target.value;
    
    this.setState({value: event.target.value,  age: age});
  }
  render() {
    return (
      <form  >
        <label>
          Year of birth:
          <input type="text"  onChange={this.handleChange} />
        </label>
        <Banner age={this.state.age} />
      </form>
    );
  }
}
ReactDOM.render(
  <YearForm  />,
  document.getElementById('root')
);

prop-types1.js

The above example shows how to setup a custom validation function which you can use to make sure the data type entered by the user is valid (in this case, it’s checking if it’s something that can be cast into a number).

If it’s not, then you’ll get an error similar to the one shown below:

Essentially, PropTypes lets you add dynamic data type checks which are much more powerful than what JavaScript has by default. Careful though, this is just for checking the data type of the information you pass to your components, nothing else.

That being said, the errors are not visible unless you know where to look for them (as you’ve seen in the screenshots). This means that the validation doesn’t break execution if it fails, it only reports on what’s happening when the types aren’t properly assigned. And as an added bonus, the custom validation functions allow you to enhance JavaScript’s innate ability to perform dynamic data type checks.

What if this is not enough to you? What if you want an extra level of protection over your code to make sure your project is structured correctly, and everyone working on it is using your code the right way? Enter static type checking.

Adding Static Type Checking to your React projects

This type of type-checking is performed before execution, usually during the bundling stage, where you pre-process your code, your stylesheets and, considering that this is another form of code-verification, performing it whenever you do your unit tests is a good idea.

That being said, the concept of static type checking for JavaScript (and thus, for React as well) is “unnatural”, since by definition, the language is weakly typed (or dynamically typed, depending on which definition you want to go with). So performing type checking on React means dealing with the following facts:

  • JavaScript has types attached to values
  • Operations with those values react in different ways depending on their types (i.e you can divide 2 by “hello”, and you’ll get NaN, while 2 divided by 2 would yield a number).
  • Variables don’t have a type, so you can use the same variable to store a string value, then assign it a number and it’ll still be valid code and it will execute correctly.

With this in mind, the following code would be perfectly valid in JavaScript:


function fn(x) {
  if(!x) {
    return false;
  }
  
  x += 1;
  return x;
}

js-code.js

Reading the above code, what would you say is the type of x or the return type of fn? Really, you can’t tell, and the language will even try its best to accommodate for some strange, unforeseen use cases, such as:

fn("hello") => "hello1"
fn(_ => 3) => "_ => 31"
fn({prop:1}) => "[object Object]1"

With that in mind I think I’ve answered the following question:

Why would you go through the trouble of adding static type checking into a language that was designed to work without it?

Clearly, trying to avoid scenarios like the ones described above is a very common answer.

Others might include:

  • Code becomes less error-prone since you have an extra layer of verification on top of your code that catches simple (yet very common) mistakes.
  • Potential for code optimization, if your compiler (and I’m using that word lightly here, but you can think of transpilers as well) can pick up on better ways to write some sentences based on the types you’re using.
  • Your code is easier to read by others. Not having to mentally parse types is a great help for developers trying to understand code from others.
  • Support for better tooling. With static type declarations, your IDEs can help you write better code by making suggestions or performing checks while you write.

I’m sure you can also add some more things to that list, and that alone shows how much potential a static type checker for JavaScript has, so what are our options?

Existing Static Type Checkers for compatible with React

Although the idea (and the added benefits) of having a static type checker in your project might sound so compelling, the actual effort required to do so seems to have hindered most efforts.

Therefore, there are two really useful options out there: Flow and TypeScript.

Using Flow

Flow allows you to add type annotations to your Vanilla JavaScript and then process that code to check for problems.

You can install it with npm writing:

$ npm install --save-dev flow-bin

You’ll also need to add a few script to the package.json file of your project:

{
  "name": "my-flow-project",
  "version": "1.0.0",
  "devDependencies": {
    "flow-bin": "^0.111.3"
  },
  "scripts": {
    "flow": "flow",
    "build": "flow-remove-types src/ -d lib/",
    "prepublish": "npm run build"
  }
}

package.json

The benefit of using Flow with React, is that if you created your project using Create React App you don’t need to worry about removing the type annotations. That will be done for you.

If you didn’t however, you’ll need to to install Flow’s type-remover (since you’ll need to strip away the added annotations for your code to be correctly interpreted):

$ npm install --save-dev flow-remove-types

That is, of course, assuming your code is inside the src folder and that you want the final version (the “compiled” JS code,if you will) to be stored inside the lib folder.

You can then start annotating your code like this (notice the first line, without it, Flow will ignore your files, so don’t forget about it!):

//@flow

function concat(a: string, b: string) {
  return a + b;
}

let string1: string = "hello"
let string2: number = 42

concat(string1, string2)

concat-flow.js

Later, if you were to test your code with Flow, you’d get something like this:

Of course, given that the + operator works for both, strings and numbers, without the annotations, your code would work. This merely ensures you get the results you’d expect from an actual concat function.

You can read all about their annotations here, if you want to know more about them.

Another cool and interesting bit about Flow, is that in some cases, it is capable of inferring expected types without you having to specify them. For example:

// @flow
function square(n) {
  return n * n; 
}

square("hello world!");

flow-example.js

The above code would fail, because it knows you’re not supposed to use the * operator with strings!

Using TypeScript for your type checking needs

While Flow allows you to add type annotations which you later need to remove, TypeScript is actually a whole different language built on-top of JavaScript. It provides you with the ability to perform static type checking, which is why I’ve added it here, but it also provides a lot more, so you should check it out if you haven’t yet.

Because of the nature of the language, you’ll have to install a transpiler, which will translate your TypeScript code into JavaScript once you’re ready to test it.

You can do that with npm with the following line:

$ npm install -g typescript

To check your code and transpile it, you’ll use the following line:

tcs your-file.ts

Notice the .ts extension, that’s how you tell TypeScript which files to analyze. There is no need to add extra comments in your code like with Flow.

Using the same example we used for Flow (minus the first line), you’ll get this output from TypeScript:

Although it’s a bit less verbose, it provides you with the same type of error Flow did.

However, TypeScript will not try to infer types if you don’t specify them, so the second example, with the square function will not throw an error here. In other words, if you’re choosing TypeScript, you’ll need to be mindful about the type declarations, otherwise you won’t get the best value out of it.

Is it worth it though?

Before we close this article, I think it’s important to acknowledge the extra effort required to add static type checks into a React project (or any JavaScript project to be honest). Because it’s not just about using the right tool, the language itself does not support it, so there is no workaround here, you’ll need to write a different version of JavaScript and then you’ll have to transpile it in order to execute it.

It adds (at least) one step to your build process, it also requires you to write more code, which if you think about it, goes against one of the main benefits of using JavaScript for web development: less code to write means faster time to market.

This is not to say static type checkers aren’t worth your effort, you just need to make sure it’s the right decision for your current circumstances.

Conclusion

React, just like JavaScript itself, lacks the innate ability to perform static data type checks by default. That being said, there are tools that can help you out in that regard: you can either use external tools or rely on dynamic type checking thanks to PropTypes. The rest of the validation logic is done for you, just like that!

So, what about you? Are you a fan of the PropTypes module? Or do you prefer to check for data type validations some other way? Share your thoughts down in the comments below!

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.