I’m trying to create a search results page. But right now I’m focusing on the pagination. I’m making sure the pagination is working expectedly with an array of results. I’m focused on the Next.js frontend right now.
I’m having an issue trying to get pagination buttons to show between the Prev and Next button. Only the first button is getting displayed, and I reckon it’s because of my PaginationNumbers component.
'use client';
import Link from "next/link";
import Search from "./search";
import React, { useEffect, useState } from "react";
const results = [...]
export default function SearchResults() {
const [page, setPage] = useState(0);
const List = () => {
return (
<>
{
results.slice(page * 10, page * 10 + 10).map((result) => {
return (
<div>
<p>{result.name}</p>
<p>{result.url}</p>
<p>{result.description}</p>
<p>{result.categories}</p>
<p>{result.upvotes}</p>
<p>{result.downvotes}</p>
</div>
)
})
}
</>
)
}
const prevPage = () => {...}
const nextPage = () => {...}
const PaginationNumbers = () => {
if (page < NOP()) {
for (let i = 0; i < NOP(); i++) {
return (
<button onClick={() => setPage(i)}>
{i}
</button>
)
}
}
}
const NOP = () => {
const numberOfPages = Math.ceil(results.length / 10);
return numberOfPages;
}
return (
<div className="flex flex-col justify-center items-center">
<div>
<Search/>
</div>
<div>
<List/>
</div>
<div>
<button onClick={prevPage}>Prev</button>
<PaginationNumbers/>
<button onClick={nextPage}>Next</button>
</div>
</div>
)
}