How to dynamically add pagination ellipses using react bootstrap pagination?
I have a working API project including Pagination.First, Pagination.Prev, Pagination.Item, Pagination.Next and Pagination.Last.
I want to add Pagination.Ellipsis on it but I don't know how to insert it into my code.
View pagination documentation react-bootstrap.github.io
This is an example of what I'm trying to achieve using pagination ellipsis sandboxEllipses.
The following is my code, which is also the sandbox code https://codesandbox.io/.
Movielist.js
import { React, useState, useEffect } from "react";
import { Col, Card, Row, Pagination } from "react-bootstrap";
import MovieListPagination from "./MovieListPagination";
const MovieList = () => {
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);
// Default current pages and posts
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage] = useState(4);
// Get current posts
const indexOfLastPost = currentPage * postsPerPage;
const indexOfFirstPost = indexOfLastPost - postsPerPage;
const currentPosts = items.slice(indexOfFirstPost, indexOfLastPost);
// Change page
const paginate = (pageNumber) => setCurrentPage(pageNumber);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((res) => res.json())
.then(
(result) => {
setIsLoaded(true);
setItems(result);
//console.log(result.results);
},
(error) => {
setIsLoaded(true);
setError(error);
}
);
}, []);
if (error) {
return <div className="p-3">Error: {error.message}</div>;
} else if (!isLoaded) {
return <div className="p-3">Loading...</div>;
} else {
return (
<>
<Row className="justify-content-center">
{currentPosts.map((item) => (
<Col sm={6} lg={4} xl={3} className="py-3" key={item.id}>
<Card bg="dark" text="light" className="text-center h-100">
<Card.Body>
<Card.Title>{item.title}</Card.Title>
<Card.Text>{item.body}</Card.Text>
</Card.Body>
</Card>
</Col>
))}
<Pagination className="justify-content-center">
<MovieListPagination
currentPage={currentPage}
postsPerPage={postsPerPage}
totalPosts={items.length}
paginate={paginate}
/>
</Pagination>
</Row>
</>
);
}
};
export default MovieList;
MovielistPagination.js
import { React } from "react";
import { Pagination } from "react-bootstrap";
const MovieListPagination = ({
currentPage,
postsPerPage,
totalPosts,
paginate
}) => {
const pageNumbers = [];
const pagesCount = Math.ceil(totalPosts / postsPerPage);
const isCurrentPageFirst = currentPage === 1;
const isCurrentPageLast = currentPage === pagesCount;
for (let i = 1; i <= pagesCount; i++) {
pageNumbers.push(i);
}
return (
<>
<Pagination.First onClick={() => paginate(1)} />
<Pagination.Prev
onClick={() => paginate(currentPage - 1)}
disabled={isCurrentPageFirst}
/>
{pageNumbers.map((number) => (
<Pagination.Item
key={number}
className={`${currentPage === number ? "active" : ""}`}
onClick={() => {
paginate(number);
}}
>
{number}
</Pagination.Item>
))}
<Pagination.Next
onClick={() => paginate(currentPage + 1)}
disabled={isCurrentPageLast}
/>
<Pagination.Last onClick={() => paginate(pagesCount)} />
</>
);
};
export default MovieListPagination;
I tried some solutions like <Pagination.Ellipsis key={pageNumbers} className="muted" /> and ff code...but it doesn't work.
// Add ellipses if there are more pages to display
if (pageNumbers[0] > 1) {
pageNumbers.unshift(<Pagination.Ellipsis key="ellipsis-start" />);
}
if (pageNumbers[pageNumbers.length - 1] < totalPosts) {
pageNumbers.push(<Pagination.Ellipsis key="ellipsis-end" />);
}
