You are viewing a single comment's thread. Return to all comments →
import React, { useEffect, useMemo, useState } from "react"; function Slides({ slides }) { const [isRestartButton, setIsRestartButton] = useState(false); const [isPrevButton, setIsPrevButton] = useState(false); const [isNextButton, setIsNextButton] = useState(false); const [currentIdx, setCurrentIdx] = useState(0); const lastIdx = slides.length - 1; const data = useMemo(()=> slides[currentIdx],[currentIdx]); useEffect(() => { if (slides.length > 1) { setIsNextButton(true); } }, []); useEffect(() => { setIsRestartButton(currentIdx !== 0); setIsPrevButton(currentIdx !== 0); setIsNextButton(currentIdx !== lastIdx); }, [currentIdx]); const handleRestartButton = () => { setCurrentIdx(0); }; const handlePrevButton = () => { setCurrentIdx(currentIdx - 1); }; const handleNextButton = () => { setCurrentIdx(currentIdx + 1); }; return ( <div> <div id="navigation" className="text-center"> <button data-testid="button-restart" className="small outlined" disabled={!isRestartButton} onClick={handleRestartButton}> Restart </button> <button data-testid="button-prev" className="small" disabled={!isPrevButton} onClick={handlePrevButton}> Prev </button> <button data-testid="button-next" className="small" disabled={!isNextButton} onClick={handleNextButton}> Next </button> </div> <div id="slide" className="card text-center"> <h1 data-testid="title">{data.title}</h1> <p data-testid="text">{data.text}</p> </div> </div> ); } export default Slides;
Seems like cookies are disabled on this browser, please enable them to open this website
Slideshow
You are viewing a single comment's thread. Return to all comments →