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).
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.
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.
We define three functions to handle the behavior of each button:
const handleRestart = () => { setCurrentSlideIndex(0); };
const handlePrev = () => { setCurrentSlideIndex((prevIndex) => Math.max(prevIndex - 1, 0)); };
const handleNext = () => { setCurrentSlideIndex((prevIndex) => Math.min(prevIndex + 1, slides.length - 1)); };
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>
The component renders the current slide’s title and text using the currentSlideIndex state:
<div> <h4> Conclusion </h4> <p>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.</p>
The above is the detailed content of How to make pagination in react.js Restart, Prev, Next. For more information, please follow other related articles on the PHP Chinese website!