angrybeanie-front-end/components/storypager.js

import ReactPaginate from "react-paginate";
import { useRouter } from "next/router";
import Link from 'next/link'

const StoryPager = ({ storydata }) => {
    const router = useRouter()
    console.log(storydata)

    const handlePagination = page => {
        const path = router.pathname
        const query = router.query
        query.page = page.selected + 1
        router.push({
          pathname: path,
          query: query,
        })
      }
    
    return (
        <div className="episode_pages col-sm-12">
            <div className="show_episodes">
                {storydata.data.map((story) => (
                    <div key={story.slug}>
                        <div className="episode_title">
                            <Link href="/news/[slug]" as={"/news/" + story.attributes.Slug}>{story.attributes.Title}</Link>
                        </div>
                        <div className="article_body" dangerouslySetInnerHTML={{ __html: story.attributes.Abstract }} />
                    </div>
                ))}
                <ReactPaginate
                marginPagesDisplayed={2}
                pageRangeDisplayed={5}
                previousLabel={"previous"}
                nextLabel={"next"}
                breakLabel={"..."}
                initialPage={storydata.page}
                pageCount={storydata.meta.pagination.pageCount}
                onPageChange={handlePagination} />
            </div>
        </div>
    )

}

export default StoryPager