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:
Can someone help me?
. It turned out I named pagesSize intead of pageSize resulting in React not finding that prop.
.