CODEWITHSUNDEEP
reactjspagination
Mosalah
Mosalah

Reputation: 91

Adding next and prev buttons using react.js

I succeded to paginate my posts but couldn't add next and prev buttons and make them dynamically using this code snippet:

import React from 'react'

const Pagination = ({postsPerPage, totalPosts, paginate}) => {
    console.log(totalPosts)
    const PageNumbers = []

    const int = Math.ceil(totalPosts / postsPerPage)
    if (int === 1 ) return null 
    for (let i = 1; i<= int; i++) {
        PageNumbers.push(i) 
    }
    return (
        <nav aria-label="Page navigation example">
            <ul className="pagination">
                {PageNumbers.map(number=> (
                    <li key={number} className="page-item">
                        <a onClick={ ()=> paginate(number)} href="!#" className="page-link">
                            {number} 
                        </a>
                    </li>
                ))}
            </ul>
        </nav>
    )
}
export default Pagination

please help to find way to include these buttons next and prev dynamically to my pagination who appears down. It's working great but needs next and prev

enter image description here

Upvotes: 4

Views: 6706

Answers (3)

Gobinda Saha
Gobinda Saha

Reputation: 23

You can do this -

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

const Pagination = ({ postPerPage, totalPosts, paginate, }) => {
const [index, setIndex] = useState(1);
const pageNumbers = [];
for (let index = 1; index <= Math.ceil(totalPosts /postPerPage);index++) 
{
    pageNumbers.push(index);
}

return (
    <nav className='your-custom-styles'>
        <ul className="your-custom-styles">
            <li>
                <Link
                    onClick={() => {
                        if (pageNumbers.includes(index - 1)) {
                            setIndex(index - 1);
                            paginate(index - 1);
                        }
                    }}
                    className="your-custom-styles">
                    Previous
                </Link>
            </li>
            {pageNumbers.map((number) =>
                <li key={number}>
                    <Link onClick={() => 
                       {
                         setIndex(number);
                         paginate(number); 
                       }} 
                     className="your-custom-styles">{number}</Link>
                </li>
            )}
            <li>
                <Link
                    onClick={() => {
                        if (pageNumbers.includes(index + 1)) {
                            console.log(index)
                            setIndex(index + 1);
                            paginate(index + 1);
                        }
                    }}
                    className="your-custom-styles">
                    Next
                </Link>
            </li>
        </ul>
    </nav>
);}

 export default Pagination;

Upvotes: 0

user3703906
user3703906

Reputation: 1

const [currentPage, setCurrentPage] = useState(1);

const getPrevious  = () => {
        setCurrentPage(currentPage - 1)
    }
    const getNext  = () => {
        setCurrentPage(currentPage + 1)
    }

and need to use these functions on previous and next buttons. This worked for me fortunately

Upvotes: 0

Nick
Nick

Reputation: 16606

Let's give your component some state so it can know the current page and, therefore, can know how to go to the next page. This should get you pretty close!

import React, { useState } from 'react'

const Pagination = ({postsPerPage, totalPosts, paginate}) => {
    const [currentPage, setCurrentPage] = useState(0)

    console.log(totalPosts)
    const PageNumbers = []

    const int = Math.ceil(totalPosts / postsPerPage)
    if (int === 1 ) return null 
    for (let i = 1; i<= int; i++) {
        PageNumbers.push(i) 
    }
    return (
        <nav aria-label="Page navigation example">
            <ul className="pagination">
                {PageNumbers.includes(currentPage - 1) && <a onClick={() => {
                    setCurrentPage(currentPage - 1);
                    paginate(currentPage - 1);
                }}>}
                    Prev
                </a>
                {PageNumbers.map(number=> (
                    <li key={number} className="page-item">
                        <a onClick={()=> {
                            setCurrentPage(number)
                            paginate(number)
                        }} href="!#" className="page-link">
                            {number} 
                        </a>
                    </li>
                ))}
                {PageNumbers.includes(currentPage + 1) && <a onClick={() => {
                    setCurrentPage(currentPage + 1);
                    paginate(currentPage + 1);
                }}>}
            </ul>
        </nav>
    )
}
export default Pagination

Upvotes: 3

Related Questions