Coding Challenge Practice - Question 6

Today's Question

Create a small React application that displays a series of slides and allows users to navigate through them.

Solution

First, the boilerplate provided:

import React from "react";

function Slides({ slides }) {
  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined">
          Restart
        </button>
        <button data-testid="button-prev" className="small">
          Prev
        </button>
        <button data-testid="button-next" className="small">
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">"Title"</h1>
        <p data-testid="text">"Text"</p>
      </div>))}
    </div>
  );
}

export default Slides;

The first step is to create a state to manage the slides.

const [currentIndex, setCurrentIndex] = useState(0)

The slide to be displayed will be determined by the index of the slide object in the array. The default slide on loading the application will be the first slide object. The index of the first item in an array is always 0.

Next, the functions for the buttons used to navigate through the slides will be created.

import React, { useState} from "react";


  const handlePrev = () => {
    setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0))
  }
  const handleNext = () => {
    setCurrentIndex((prevIndex) => Math.min(prevIndex + 1, slides.length - 1))
  }
  const handleRestart = () => {
    setCurrentIndex(0)
  }

In setting the slide displayed to the previous slide, Math.max is used to ensure that the currentIndex cannot be less than 0. Likewise, Math.min is used to ensure that the currentIndex cannot be greater than the length of the slides array, i.e cannot be greater than the number of slides available.

Finally, whatever the current slide is will be the only slide to be displayed. The h1 and p tags will be edited to display whatever values they have.

  const currentSlide = slides[currentIndex]
  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart"
        onClick={handleRestart} disabled={currentIndex === 0} className="small outlined">
          Restart
        </button>
        <button data-testid="button-prev"
        onClick={handlePrev} disabled={currentIndex === 0} className="small">
          Prev
        </button>
        <button data-testid="button-next" 
        onClick={handleNext} disabled={currentIndex === slides.length - 1}className="small">
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{currentSlide.title}</h1>
        <p data-testid="text">{currentSlide.text}</p>
      </div>
    </div>
  );
}

export default Slides;

To display the current slide, a variable is created that accepts the currentIndex as the index of the slide array. The final code looks like this:

import React, { useState} from "react";

function Slides({ slides }) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const handlePrev = () => {
    setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0))
  }
  const handleNext = () => {
    setCurrentIndex((prevIndex) => Math.min(prevIndex + 1, slides.length - 1))
  }
  const handleRestart = () => {
    setCurrentIndex(0)
  }
  const currentSlide = slides[currentIndex]
  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart"
        onClick={handleRestart} disabled={currentIndex === 0} className="small outlined">
          Restart
        </button>
        <button data-testid="button-prev"
        onClick={handlePrev} disabled={currentIndex === 0} className="small">
          Prev
        </button>
        <button data-testid="button-next" 
        onClick={handleNext} disabled={currentIndex === slides.length - 1}className="small">
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{currentSlide.title}</h1>
        <p data-testid="text">{currentSlide.text}</p>
      </div>
    </div>
  );
}

export default Slides;

That's all folks!