Adding Previous & Next Buttons in Our News App 🗞️⏭️
Right now our News App shows all articles at once.
In a real-world app, news APIs return articles in pages —
a fixed number per page — and we navigate between them using
Previous and Next buttons.
In this tutorial, we will learn:
- What is pagination and why it matters
- Adding
page and pageSize to component state
- Writing
handlePrevClick and handleNextClick methods
- Disabling buttons on the first and last page
- Passing
totalResults as a prop for smart button control
- Rendering the Previous & Next buttons in JSX
---
What is Pagination?
Pagination means splitting a large list of data into smaller chunks called pages.
Instead of loading 500 news articles at once, we load 6 at a time and let the user
click Next to load the next 6, or Previous to go back.
This makes our app faster and much easier to use.
---
Step 1: Add page and pageSize to State
Open your News.js class component and update the state to track which page we are on
and how many articles to show per page.
import React, { Component } from "react";
import NewsItem from "./NewsItem";
export class News extends Component {
// Default prop values
static defaultProps = {
pageSize: 6,
totalResults: 30,
};
state = {
articles: [],
page: 1,
};
render() {
return (
<div className="container my-4">
<h2 className="text-center mb-4">Welcome to News App 📰</h2>
</div>
);
}
}
export default News;
---
Step 2: Write handlePrevClick Method
This method decreases the page number by 1 when the user clicks Previous.
We also make sure the page never goes below 1.
handlePrevClick = () => {
this.setState({ page: this.state.page - 1 });
};
---
Step 3: Write handleNextClick Method
This method increases the page number by 1 when the user clicks Next.
handleNextClick = () => {
this.setState({ page: this.state.page + 1 });
};
---
Step 4: Add the Buttons in render()
Now let's add the Previous and Next buttons below the news articles.
We use Bootstrap classes to style them nicely.
We also disable the Previous button on page 1, and disable the Next button
when we have reached the last page using totalResults and pageSize.
render() {
const { pageSize, totalResults } = this.props;
const { page, articles } = this.state;
return (
<div className="container my-4">
<h2 className="text-center mb-4">Welcome to News App 📰</h2>
{articles.map((article, index) => (
<NewsItem
key={index}
title={article.title}
description={article.description}
imageUrl={article.urlToImage}
newsUrl={article.url}
/>
))}
{/* Previous & Next Buttons */}
<div className="d-flex justify-content-between my-4">
<button
className="btn btn-warning"
onClick={this.handlePrevClick}
disabled={page <= 1}
>
← Previous
</button>
<span className="align-self-center fw-bold">
Page {page} of {Math.ceil(totalResults / pageSize)}
</span>
<button
className="btn btn-warning"
onClick={this.handleNextClick}
disabled={page >= Math.ceil(totalResults / pageSize)}
>
Next →
</button>
</div>
</div>
);
}
---
Step 5: Full Updated News.js
Here is the complete News.js file with all the changes combined.
import React, { Component } from "react";
import NewsItem from "./NewsItem";
export class News extends Component {
static defaultProps = {
pageSize: 6,
totalResults: 30,
};
state = {
articles: [
{
title: "React 19 Released",
description: "React 19 brings exciting improvements for developers.",
urlToImage: "",
url: "#",
},
{
title: "GitHub Pages Hosting Made Easy",
description: "Deploy your React app for free using GitHub Pages.",
urlToImage: "",
url: "#",
},
{
title: "JavaScript ES2025 Features",
description: "Explore the newest JavaScript features landing in 2025.",
urlToImage: "",
url: "#",
},
],
page: 1,
};
handlePrevClick = () => {
this.setState({ page: this.state.page - 1 });
};
handleNextClick = () => {
this.setState({ page: this.state.page + 1 });
};
render() {
const { pageSize, totalResults } = this.props;
const { page, articles } = this.state;
return (
<div className="container my-4">
<h2 className="text-center mb-4">Welcome to News App 📰</h2>
{articles.map((article, index) => (
<NewsItem
key={index}
title={article.title}
description={article.description}
imageUrl={article.urlToImage}
newsUrl={article.url}
/>
))}
<div className="d-flex justify-content-between my-4">
<button
className="btn btn-warning"
onClick={this.handlePrevClick}
disabled={page <= 1}
>
← Previous
</button>
<span className="align-self-center fw-bold">
Page {page} of {Math.ceil(totalResults / pageSize)}
</span>
<button
className="btn btn-warning"
onClick={this.handleNextClick}
disabled={page >= Math.ceil(totalResults / pageSize)}
>
Next →
</button>
</div>
</div>
);
}
}
export default News;
---
How Button Disabling Works
| Button |
Disabled When |
Reason |
| Previous |
page <= 1 |
Already on the first page, can't go back further |
| Next |
page >= Math.ceil(totalResults / pageSize) |
Already on the last page, no more articles to show |
---
Features and Learnings:-
Understood what pagination is and why it is important in web apps.
Added page to component state to track the current page.
Used defaultProps to set pageSize and totalResults.
Wrote handlePrevClick and handleNextClick arrow functions.
Learned to disable buttons using conditions based on current page.
Displayed the current page and total pages count in the UI.
Prepared the app for the next step: fetching real articles from a News API.