We use cookies to ensure you have the best browsing experience on our website. Please read our cookie policy for more information about how we use cookies.
  1. Prepare
  2. React
  3. Components
  4. Slideshow
  5. Discussions

Slideshow

  • agustinlopez9
     + 0 comments

    Here is my solution, "direction" could be an Enum type in typescript. Also, I like to keep things in one single handler function whenever possible.

    import React, { useState } from "react";

function Slides({ slides }) {
  const [slideNumber, setSlideNumber] = useState(0);

  const handleChangeSlide = (direction) => {
    if(direction === 'prev' && slideNumber < 1) return null;
    if(direction === 'next' && slideNumber > slides.length-1) return null;
    return direction === 'prev' ? setSlideNumber(slideNumber-1) : setSlideNumber(slideNumber+1);
  }

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

export default Slides;