How to make pagination in react.js Restart, Prev, Next

Blog Post: Building a Simple Slide Navigation Component in React

In this post, we'll walk through creating a basic slide navigation component in React. This component allows users to navigate through a series of slides using "Restart", "Prev", and "Next" buttons. We'll manage the current slide index using React's useState hook and ensure that the buttons are disabled when appropriate (e.g., at the start or end of the slide deck).

Overview of the Code

The Slides component receives an array of slides as a prop. Each slide contains a title and some text. The navigation buttons allow the user to move forward and backward through the slides, and the "Restart" button takes the user back to the first slide.

Managing State with useState

We use the useState hook to manage the current slide index:

const [currentSlideIndex, setCurrentSlideIndex] = useState(0);

This state keeps track of the currently displayed slide. We start at slide 0 and update this value when users click on "Prev", "Next", or "Restart" buttons.

Handling Button Clicks

We define three functions to handle the behavior of each button:

1. Restart Button: Resets the current slide index to 0, taking the user back to the first slide.

const handleRestart = () => {
  setCurrentSlideIndex(0);
};

1. Previous Button: Decreases the slide index by 1, but ensures it never goes below 0 (the first slide).

const handlePrev = () => {
  setCurrentSlideIndex((prevIndex) => Math.max(prevIndex - 1, 0));
};

1. Next Button: Increases the slide index by 1, but ensures it doesn’t go beyond the last slide.

const handleNext = () => {
  setCurrentSlideIndex((prevIndex) => Math.min(prevIndex + 1, slides.length - 1));
};

Disabling Buttons

We disable the "Prev" and "Restart" buttons when the user is viewing the first slide, and the "Next" button is disabled when the user is viewing the last slide:

<button
  data-testid="button-restart"
  onClick={handleRestart}
  disabled={currentSlideIndex === 0}
>
  Restart
</button>

<button
  data-testid="button-prev"
  onClick={handlePrev}
  disabled={currentSlideIndex === 0}
>
  Prev
</button>

<button
  data-testid="button-next"
  onClick={handleNext}
  disabled={currentSlideIndex === slides.length - 1}
>
  Next
</button>

Rendering the Slide Content

The component renders the current slide’s title and text using the currentSlideIndex state:

<div id="slide" className="card text-center">
  <h1 data-testid="title">{slides[currentSlideIndex].title}</h1>
  <p data-testid="text">{slides[currentSlideIndex].text}</p>
</div>

Conclusion

This simple yet effective slide navigation component demonstrates the power of React's useState for managing UI state. By using dynamic state and event handling, we've created a flexible component that allows users to interact with the slides in a user-friendly way. You can extend this component by adding features like animations or auto-slide transitions.