Front-end Pagination with React

npm install react-paginate --save
import ReactPaginate from 'react-paginate';
https://www.npmjs.com/package/react-paginate
https://www.npmjs.com/package/react-paginate
return (
<div>
<label>Search</label>
<input type="text" onChange={(event) => setQuery(event.target.value)} />
<button onClick={handleFetch}>Get Data</button>

{isLoaded ? (
hits.map((item) => {
return (
<NewsCard
url={item.url}
title={item.title}
author={item.author}
key={item.objectID}
/>
);})
) : (
<div></div>
)}
#New
{isLoaded ? (
<ReactPaginate
pageCount={pageCount}
pageRange={2}
marginPagesDisplayed={2}
onPageChange={handlePageChange}
containerClassName={'container'}
previousLinkClassName={'page'}
breakClassName={'page'}
nextLinkClassName={'page'}
pageClassName={'page'}
disabledClassName={'disabled'}
activeClassName={'active'}
/>
) : (
<div>Nothing to display</div>
)}

</div>);

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store