Pagination - Displaying pages


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 (
        <p>Showing {count} movies in the Store</p>
        <table className="table">
              <th />
              <th />
            { => (
              <tr key={movie._id}>
                    onClick={() => this.handleLike(movie)}
                  onClick={() => this.handleDeleteMovie(movie)}
                  className="btn btn-danger btn-sm">

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 (
      <ul className="pagination">
        { => (
          <li key={page} className="page-item">
            <a href="/" className="page-link">

export default Pagination;

Browser result:

Can someone help me?

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

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

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?

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


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:

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

1 Like

I console.logged pageSize and itemsCount, the latter rendered 9 and the former rendered null :astonished:. 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 :heart_eyes:.

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.