# Pagination - Displaying pages

**URL:** <https://forum.codewithmosh.com/t/pagination-displaying-pages/343>\
**Category:** React\
**Created:** [October 28, 2020, 10:37pm UTC](https://forum.codewithmosh.com/t/pagination-displaying-pages/343 "2020-10-28T22:37:59Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![fabgrel10](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/fabgrel10/32/323_2.png) [@fabgrel10](https://forum.codewithmosh.com/u/fabgrel10)\
**Post date:** [October 28, 2020, 10:37pm UTC](https://forum.codewithmosh.com/t/pagination-displaying-pages/343/1 "2020-10-28T22:37:59Z")

</div>

Hello:

On Pagination, filtering and sorting - Displaying pages lesson, when doing it myself I can only manage to display the first page button not 3 buttons as shown in the video. I double and tripled watched the lessons to make sure I didn’t do something incorrectly but I can’t spot where the error is and I don’t see any errors in the console neither. This is my code so far:

```
// movies.jsx
import React, { Component } from 'react';
import Like from './common/Like';
import Pagination from './common/Pagination';
import { getMovies } from '../services/fakeMovieService';

class Movies extends Component {
  state = {
    movies: getMovies(),
    pagesSize: 4
  };

  handleDeleteMovie = movie => {
    const movies = this.state.movies.filter(
      movieDelete => movieDelete._id !== movie._id
    );
    this.setState({ movies });
  };

  handleLike = movie => {
    const movies = [...this.state.movies];
    const index = movies.indexOf(movie);
    movies[index] = { ...movies[index] };
    movies[index].liked = !movies[index].liked;
    this.setState({ movies });
  };

  handlePageChange = pageNumber => {
    this.setState({ currentPage: pageNumber });
  }

  render() {
    const { length: count } = this.state.movies;

    if (count === 0) return <p>There are no movies left in the store</p>;

    return (
      <React.Fragment>
        <p>Showing {count} movies in the Store</p>
        <table className="table">
          <thead>
            <tr>
              <th>Title</th>
              <th>Genre</th>
              <th>Stock</th>
              <th>Rate</th>
              <th />
              <th />
            </tr>
          </thead>
          <tbody>
            {this.state.movies.map(movie => (
              <tr key={movie._id}>
                <td>{movie.title}</td>
                <td>{movie.genre.name}</td>
                <td>{movie.numberInStock}</td>
                <td>{movie.dailyRentalRate}</td>
                <td>
                  <Like
                    liked={movie.liked}
                    onClick={() => this.handleLike(movie)}
                  />
                </td>
                <button
                  onClick={() => this.handleDeleteMovie(movie)}
                  className="btn btn-danger btn-sm">
                  Delete
                </button>
              </tr>
            ))}
          </tbody>
        </table>
        <Pagination
          itemsCount={count}
          pagesSize={this.state.pageSize}
          onPageChange={this.handlePageChange}
        />
      </React.Fragment>
    );
  }
}

export default Movies;

// pagination.jsx
import React from 'react';
import _ from 'lodash';

const Pagination = props => {
  const { itemsCount, pageSize } = props;
  const pagesCount = Math.ceil(itemsCount / pageSize);
  if (pagesCount === 1) return null;
  const pages = _.range(1, pagesCount + 1);

  return (
    <nav>
      <ul className="pagination">
        {pages.map(page => (
          <li key={page} className="page-item">
            <a href="/" className="page-link">
              {page}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default Pagination;

```

Browser result:

 ![2020-10-28_16-35](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/1X/6e6f5588e6286017a8997016f7c7ae34bbcd8d46.png)

Can someone help me?

---

<div class="post-metadata">

**Author:** ![hakuhal](https://avatars.discourse-cdn.com/v4/letter/h/b19c9b/32.png) [@hakuhal](https://forum.codewithmosh.com/u/hakuhal)\
**Post date:** [October 29, 2020, 5:58am UTC](https://forum.codewithmosh.com/t/pagination-displaying-pages/343/2 "2020-10-29T05:58:42Z")

</div>

> [@fabgrel10](#):
>
> ` const { length: count } = this.state.movies;`

change this to `const count = this.state.movies.length`

---

<div class="post-metadata">

**Author:** ![fabgrel10](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/fabgrel10/32/323_2.png) [@fabgrel10](https://forum.codewithmosh.com/u/fabgrel10)\
**Post date:** [October 29, 2020, 4:18pm UTC](https://forum.codewithmosh.com/t/pagination-displaying-pages/343/3 "2020-10-29T16:18:18Z")

</div>

Hello hakuhal, I did that and still having only one-page button 😕

---

<div class="post-metadata">

**Author:** ![hakuhal](https://avatars.discourse-cdn.com/v4/letter/h/b19c9b/32.png) [@hakuhal](https://forum.codewithmosh.com/u/hakuhal)\
**Post date:** [October 29, 2020, 4:58pm UTC](https://forum.codewithmosh.com/t/pagination-displaying-pages/343/4 "2020-10-29T16:58:41Z")

</div>

Sorry that it did not work. If I debug this problem, I would think the count of pages may be wrong. So the buttons were not rendered correctly. Could you add a console.log of pages array in pagination.jsx and upload the capture?

---

<div class="post-metadata">

**Author:** ![fabgrel10](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/fabgrel10/32/323_2.png) [@fabgrel10](https://forum.codewithmosh.com/u/fabgrel10)\
**Post date:** [October 29, 2020, 5:06pm UTC](https://forum.codewithmosh.com/t/pagination-displaying-pages/343/5 "2020-10-29T17:06:57Z")

</div>

You were right, when I console.log pages and pages.length I got 1 😶

![2020-10-29_11-04](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/1X/a0bc7e6beb9672fd92e3ec387cae99346ca80890.png)

---

<div class="post-metadata">

**Author:** ![hakuhal](https://avatars.discourse-cdn.com/v4/letter/h/b19c9b/32.png) [@hakuhal](https://forum.codewithmosh.com/u/hakuhal)\
**Post date:** [October 29, 2020, 5:34pm UTC](https://forum.codewithmosh.com/t/pagination-displaying-pages/343/6 "2020-10-29T17:34:37Z")

</div>

Could you console.log itemsCount, pageSize, as well? If you got [1] as the result, it means pagesCount = 1. That means itemsCount may not be passed correctly. You need to add more console.log in Movies.jsx to track it.

By the way,this line:

> [@fabgrel10](#):
>
> `if (pagesCount === 1) return null;`

It is wrong. The correct is:  
`if(pagesCount === 1) pages = [];`  
The purpose is “when there is only one page, do not show any buttons”. As you control buttons by pages array,` return null`; simply ended this snippet and did nothing 😶

---

<div class="post-metadata">

**Author:** ![fabgrel10](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/fabgrel10/32/323_2.png) [@fabgrel10](https://forum.codewithmosh.com/u/fabgrel10)\
**Post date:** [October 29, 2020, 6:00pm UTC](https://forum.codewithmosh.com/t/pagination-displaying-pages/343/7 "2020-10-29T18:00:38Z")

</div>

I console.logged pageSize and itemsCount, the latter rendered 9 and the former rendered null 😲. It turned out I named pagesSize intead of pageSize resulting in React not finding that prop.

Problem is solved now, thanks a lot hakuhal, I love you 😍.

---

<div class="post-metadata">

**Author:** ![somdhendup](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/somdhendup/32/828_2.png) [@somdhendup](https://forum.codewithmosh.com/u/somdhendup)\
**Post date:** [January 27, 2022, 7:47am UTC](https://forum.codewithmosh.com/t/pagination-displaying-pages/343/8 "2022-01-27T07:47:40Z")

</div>

Hi there,

I’m newbie to here and currently I’m learning the Mosh’s Mastering React course.  
Exactly on the same section(Pagination, filtering, sorting = Displaying pages) I’m having the same issues, which I could not show the buttons rather than the first button only.  
Though I’ve been trying to solve it after reading above information but I could not. So, if somebody could help me to fix this in more details, its much appreciable and thanks in advance.