Implementing Next and Previous Buttons in React.js | Updated 2024

82

Navigating through content using next and previous buttons is a common feature in many web applications. In this article, we’ll create a simple React application with next and previous buttons to navigate through a list of items. We’ll cover setting up the project, creating the navigation buttons, and managing the state to handle the navigation.

Steps for Implementing Next and Previous Buttons in React.js

Step 1: Setting Up a New React Project

Initialize a New Project

npx create-react-app react-navigation
cd react-navigation

Start the Development Server

npm start

Step 2: Create the Item List and Navigation Buttons

Create a Component for Navigation

We’ll create a new component called ItemNavigator that will handle the list of items and the navigation logic.

// src/ItemNavigator.js
import React, { useState } from 'react';

const items = [
  'Item 1',
  'Item 2',
  'Item 3',
  'Item 4',
  'Item 5',
];

const ItemNavigator = () => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleNext = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
  };

  const handlePrevious = () => {
    setCurrentIndex((prevIndex) => (prevIndex - 1 + items.length) % items.length);
  };

  return (
    <div>
      <h1>{items[currentIndex]}</h1>
      <button onClick={handlePrevious} disabled={currentIndex === 0}>
        Previous
      </button>
      <button onClick={handleNext} disabled={currentIndex === items.length - 1}>
        Next
      </button>
    </div>
  );
};

export default ItemNavigator;

Integrate the Component into the App

Modify the App.js file to include the ItemNavigator component.

// src/App.js
import React from 'react';
import './App.css';
import ItemNavigator from './ItemNavigator';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <ItemNavigator />
      </header>
    </div>
  );
}

export default App;

Step 3: Adding Styling

Add Basic Styling

Add some basic CSS to style the application. You can modify the App.css file for this purpose.

/* src/App.css */
.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: #61dafb;
  color: #282c34;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

Step 4: Running the Application

Start the React Development Server

npm start

View the Application

Open your browser and navigate to http://localhost:3000 to see the next and previous buttons in action.

Conclusion

In this article, we covered how to create next and previous buttons in a React.js application to navigate through a list of items. We created a new React project, built a navigation component, and added basic styling to the application. This basic implementation can be further expanded and customized to fit more complex use cases.

For more updates on programming trends and tutorials, visit blogsea.net regularly.

Implementing Next and Previous Buttons in React.js – FAQs