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

|

28 Discussions

|

  • 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;

  • asmrahul17
     + 0 comments

    My solution: 

    import React, { useState } from "react";

function Slides({ slides }) {
  const [idx, setIdx] = useState(0)
  const slideLength=slides.length-1;
  let title = slides[idx].title;
  let text = slides[idx].text;

  const handleRes = () => {
    setIdx(idx=>0)    
  }
  const handlePrev = () => {
    setIdx(idx=>idx-1)
  }
  const handleNext = () => {      
    setIdx(idx=>idx+1)   
  }


  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined" onClick={handleRes} disabled={idx===0?true:false}>
          Restart
        </button>
        <button data-testid="button-prev" className="small" onClick={handlePrev} disabled={idx===0?true:false}>
          Prev
        </button>
        <button data-testid="button-next" className="small" onClick={handleNext} disabled={idx===(slideLength)?true:false}>
          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;

  • oniahmad20
     + 0 comments

    My Solution: 

    import React, {useState} from "react";

function Slides({ slides }) {
  if (slides.length === 0) return null;

  const [slideNo, setSlideNo] = useState(0);
  
  const restartSlide = () => setSlideNo(0);
  const handleSlideMove = (isNextSlide = true) => setSlideNo(prevSlideNo => isNextSlide ? prevSlideNo + 1 : prevSlideNo - 1);

  const { title, text } = slides[slideNo];
  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined" disabled={slideNo === 0} onClick={restartSlide}>
          Restart
        </button>
        <button data-testid="button-prev" className="small" disabled={slideNo === 0} onClick={() => handleSlideMove(false)}>
          Prev
        </button>
        <button data-testid="button-next" className="small" disabled={slideNo + 1 === slides.length} onClick={() => handleSlideMove()}>
          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;

  • marcus_relation
     + 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 (
    <div>
      <div id="navigation" className="text-center">
        <button
          data-testid="button-restart"
          className="small outlined"
          onClick={restart}
          disabled={currentIndex === 0}
        >
          Restart
        </button>
        <button
          data-testid="button-prev"
          className="small"
          onClick={goToPrev}
          disabled={currentIndex === 0}
        >
          Prev
        </button>
        <button
          data-testid="button-next"
          className="small"
          onClick={goToNext}
          disabled={currentIndex === slides.length - 1}
        >
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{slides[currentIndex].title}</h1>
        <p data-testid="text">{slides[currentIndex].text}</p>
      </div>
    </div>
  );
}

export default Slides;