My task tracker allows me to show 4 tasks per page, with additional tasks moving to the next page using React pagination when there are more than 4.
I need the page numbers to remain fixed in position and not move. For example, if I have 2 pages of tasks - the first with all 4 tasks and the second with 2 tasks - I want the pagination to stay right under the last task without shifting.
Task component
const Task = ({ tasks, setTasks, completeTask, removeTask }) => {
const [pageNumber, setPageNumber] = useState(0);
const tasksPerPage = 4;
const pagesVisited = pageNumber * tasksPerPage;
const displayTasks = tasks
.slice(pagesVisited, pagesVisited + tasksPerPage)
.map((task, index) => {
return (
<div
className={task.isComplete ? 'todo-row complete' : 'todo-row'}
key={index}>
<div key={task.task_id} onClick={() => completeTask(task.task_id)}>
{task.description}
</div>
<div className='icons'>
<RiCloseCircleLine
onClick={() => removeTask(task.task_id)}
className='delete-icon'
/>
</div>
</div>
);
});
const pageCount = Math.ceil(tasks.length / tasksPerPage);
const changePage = ({ selected }) => {
setPageNumber(selected);
};
return (
<div>
{displayTasks}
<ReactPaginate
previousLabel={'Back'}
nextLabel={'Next'}
pageCount={pageCount}
onPageChange={changePage}
containerClassName={'paginationBttns'}
previousLinkClassName={'previousBttn'}
nextLinkClassName={'nextBttn'}
activeClassName={'paginationActive'}
/>
</div>
);
};
CSS styling
.paginationBttns {
list-style: none;
display: flex;
justify-content: center;
margin-top: 18px;
padding-left: 0;
color: white;
bottom: 12px;
}
.previousBttn, .nextBttn {
text-decoration: none;
}
.paginationBttns a {
padding: 10px;
margin: 8px;
border-radius: 5px;
border: 1px solid white;
color: white;
cursor: pointer;
}
.paginationBttns a:hover {
background: #00adb5;
}
.paginationActive a {
background: #00adb5;
}
To address this issue, I have created a code sandbox to demonstrate what is currently happening. How can I ensure that my pagination remains fixed in its position?