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

Sort by

recency

|

31 Discussions

|

  • poonamdeorasurp1
     + 0 comments

    Here is a basic Javascript project for practice Stopwatch code in Javascript

  • 36_akashroy
     + 1 comment

    Here is the cleaned up solution:

    import React, { useEffect, useState } from "react";

function Slides({ slides }) {
  const [index, setIndex] = useState(0);
  const [disableRestart, setDisableRestart] = useState(true);
  const [disableNext, setDisableNext] = useState(false);
  const [disablePrev, setDisablePrev] = useState(true);

  const slidesLength = slides?.length - 1;

  const slideTitle = slides?.[index]?.title;
  const slideText = slides?.[index]?.text;

 useEffect(() => {
  setDisableRestart(index === 0);
  setDisablePrev(index === 0);
  setDisableNext(index === slidesLength);
}, [index, slidesLength]);


  const handleRestart = () => {
    if (index > 0) {
      setIndex(0)
    }
  }

  const handleNextSlide = () => {
    if (index < slidesLength) {
      setIndex(prev => prev + 1)
    }
  }

  const handlePrevSlide = () => {
    if (index <= slidesLength && index !== 0) {
      setIndex(prev => prev - 1)
    }
  }

  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined" onClick={() => handleRestart()} disabled={disableRestart}>
          Restart
        </button>
        <button data-testid="button-prev" className="small" onClick={() => handlePrevSlide()} disabled={disablePrev}>
          Prev
        </button>
        <button data-testid="button-next" className="small" onClick={() => handleNextSlide()} disabled={disableNext}>
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{slideTitle}</h1>
        <p data-testid="text">{slideText}</p>
      </div>
    </div>
  );
}

export default Slides;

  • lalji_nakum2010
     + 0 comments

    Functionality is working as expected but still test cses are failing due to it is not using waitFor, screen and also async await is not being used.

  • deen24id
     + 0 comments

    Error line reported does not point to the actual error.

    import React from "react";

function Slides({ slides }) {

  const [slide, setSlide] = React.useState(0);
  const handleNext = () => {
    setSlide(slide+1)
  }
  const handlePrev = () => {
    setSlide(slide-1)
  }
  const handleRestart = () => {
    setSlide(0)
  }
  const hasNext = slide < 4
  const hasPrev = slide > 0
  const canRestart = slide>0

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

export default Slides;

    `

  • deepikapadmavat1
     + 0 comments

    My Solution:

    import React, { useState, } from "react";

    function Slides({ slides }) {

    const [currentIndex, setCurrentIndex] = useState(0);

    const goToNext = () => { if (currentIndex < slides.length - 1) { setCurrentIndex(currentIndex + 1); } };

    const goToPrev = () => { if (currentIndex > 0) { setCurrentIndex(currentIndex - 1); } };

    const restart = () => { setCurrentIndex(0); };

    return ( Restart Prev Next {slides[currentIndex].title} {slides[currentIndex].text}


    ); }

    export default Slides;