Pagination numbers not visible in reactjs

June 8, 2022

I am trying to set pagination for a blog I am creating with reactjs, graphql and nextjs. Though the react hooks works just fine, the page numbers are not visible and I can’t figure out where the error is coming from as there is in fact no visible error as well. Please help me figure this out with the code below:

pages/index.jsx

//import type { NextPage } from 'next'
import React, {useState, useEffect} from 'react'
import Head from 'next/head'
import Image from 'next/image'
import {PostCard, Categories, PostWidget, Pagination} from '../components'
import {getPosts} from '../services'
import {FeaturedPosts} from '../sections'



const Home = ({posts}) => {
  const [currentPage, setCurrentPage] = useState(1)
  const [postsPerPage, setPostsPerPage] = useState(1)

  //get current posts
  const indexOfLastPost = currentPage * postsPerPage
  const indexofFirstPost = indexOfLastPost - postsPerPage
  const currentPosts = posts.slice(indexofFirstPost, indexOfLastPost)

  return (
    
    <div className="container mx-auto px-10 mb-8">
      <Head>
        <title>FTS Blog</title>
        <link rel="icon" href="/fts_black.png" />
      </Head>

      <FeaturedPosts />

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <div  className='lg:col-span-8 col-span-1'>
          {currentPosts.map((post) => <PostCard post={post.node} key={post.title}/>)}
        </div>
        <Pagination postsPerPage={postsPerPage} totalPosts={posts.length} />
      
        <div className="lg:col-span-4 col-span-1">
          <div className="classname lg:sticky relative top-8">
            <PostWidget />
            <Categories />
          </div>
        </div>
      </div>

    </div>
  )
}

export default Home

export async function getStaticProps() {
  const posts = (await getPosts()) || []

  return {
    props:{posts}
  }
}

components/Pagination.jsx

import React from 'react'

const Pagination = ({postsPerPage, totalPosts}) => {
    const pageNumbers = []

    for(let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++){
        pageNumbers.push(i)
    }

  return (
      <div>
    <nav className="page navigation">
        <ul className="flex list-style-none">
            {pageNumbers.map(number => {
                <li key={number} className="page-item">
                    <a href="!#" className="page-link">
                        {number}
                    </a>
                </li>
            })}
        </ul>
    </nav>
    </div>
  )
}

export default Pagination

components/Postcard.jsx

import React from 'react'
import moment from 'moment'
import Link from 'next/link'

const PostCard = ({post}) => {
  return (
    <div className="bg-white shadow-lg rounded-lg p-0 lg:p-8 pb-12 mb-8">
      <div className="relative overflow-hidden shadow-md mb-6">
        <img 
          src={post.featuredImage.url} 
          alt={post.title}
          className="object-top h-full w-full rounded-t-lg"
          /> 
      </div>
      <h1 className="transition duration-100 text-center mb-8 cursor-pointer hover:text-pink-600 text-3xl font-semibold">
        <Link href={`/post/${post.slug}`}>
          {post.title}
        </Link>
      </h1>
      <div className="block lg:flex text-center items-center justify-center mb-8 w-full">
        <div className="flex items-center justify-center mb-4 lg:mb-0 w-full lg:auto mr-8">
          <img src={post.author.photo.url} 
            alt={post.author.name}
            height="30px"
            width="30px"
            className="align-middle rounded-full"
          />
          <p className="inline align-middle text-grey-700 ml-2 text-lg">{post.author.name}</p>
        </div>
        <div className=" flex items-center justify-center font-medium text-grey-700">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 inline mr-2 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
          <span>
            {moment(post.createdAt).format('MMM DD, YYYY')}
          </span>
        </div>
      </div>
      <p className="text-center text-lg text-grey-700 font-normal px-4 lg:px-20 mb-8">
        {post.excerpt}
      </p>
      <div className="text-center">
        <Link href={`/post/${post.slug}`}>
          <span className="transition duration-500 transform hover:-translate-y-1 inline-block bg-pink-600 text-lg font-meduim rounded-full text-white px-8 py-3 cursor-pointer">
            Continue Reading
          </span>
        </Link>
      </div>
    </div>
  )
}

export default PostCard

The code above are the areas the error might likely be coming from, thanks

>Solution :

Yo’re not returning any value on map (Pagination.jsx):

pageNumbers.map(number => {
          <li key={number} className="page-item">
             <a href="!#" className="page-link">
                  {number}
             </a>
          </li>
     }

to do so either write return before the li or remove curly brackets

This is the second option:

pageNumbers.map(number => 
                <li key={number} className="page-item">
                    <a href="!#" className="page-link">
                        {number}
                    </a>
                </li>
            )

Working example here: https://jsfiddle.net/afoone/nkj17pmh/26/