agoiabel

<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>

agoiabel

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

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

agoiabel

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

agoiabel

    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>
      )); 

agoiabel

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

agoiabel

  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();

agoiabel

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

agoiabel

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

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

agoiabel

  render() {
    

    return (
      <div className={styles.app}>
        
        <table className={styles.table}>
          <thead>
            <tr>
              <th>S/N</th>

agoiabel

<!-- Styles For Pagination -->
<style>
  .pagination span {
    cursor: pointer;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;