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

|

36 Discussions

|

  • codergithub591
     + 1 comment

    when the test fails it because the problem requirements were not completed in my case, So read the problem again.Thank you This is my code

    import React, { useState } from "react";

    function Slides({ slides }) { const [count, setCount] = useState(0);

    const next = () => setCount((prev) => prev + 1); const prev = () => setCount((prev) => prev - 1); const restart = () => setCount(0);

    return ( {count === 0 ? ( Restart ) : ( Restart )}

        {count === 0 ? (
      <button disabled data-testid="button-prev" className="small">
        Prev
      </button>
    ) : (
      <button onClick={prev} data-testid="button-prev" className="small">
        Prev
      </button>
    )}

    {count === slides.length - 1 ? (
      <button disabled data-testid="button-next" className="small">
        Next
      </button>
    ) : (
      <button onClick={next} data-testid="button-next" className="small">
        Next
      </button>
    )}
  </div>

  <div id="slide" className="card text-center">
    <h1 data-testid="title">{slides[count].title}</h1>
    <p data-testid="text">{slides[count].text}</p>
  </div>
</div>

    ); }

    export default Slides;

  • arpittiwari_in
     + 0 comments
    import React, { useState } from "react";

function Slides({ slides }) {
  const [currentIdx, setCurrentIdx] = useState(0);

  const handleRestart = () => {
    setCurrentIdx(0);
  }

  const handlePrev = () => {
    setCurrentIdx((prev) => prev-1);
  }

  const handleNext = () => {
    setCurrentIdx((prev) => prev+1);
  }

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

export default Slides;

  • Thakshila
     + 1 comment

    my solution

    function Slides({ slides }) {
  const [currentSlideIndex, SetReset] = React.useState(0);

  function handleReset(){
      SetReset(0);
  }

  function handleNext(){
    SetReset(currentSlideIndex => ++currentSlideIndex);
  }

  function handlePrevious(){
    SetReset(currentSlideIndex => --currentSlideIndex);

  }

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

export default Slides;

  • prajwallokhande3
     + 0 comments

    Simple Solution:

    import React, { useState } from "react";

function Slides({ slides }) {

  const[index,setIndex] = useState(0)
  
  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined" onClick={()=>{setIndex(0)}}
        disabled={index==0?true:false}>
          Restart
        </button>
        <button data-testid="button-prev" className="small"
        onClick={()=>{setIndex((pre)=>pre-1)}}
        disabled={index==0?true:false}>
          Prev
        </button>
        <button data-testid="button-next" className="small"
        onClick={()=>{setIndex((pre)=>pre+1)}}
        disabled={index==slides.length-1?true:false}>
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{slides[index].title}</h1>
        <p data-testid="text">{slides[index].text}</p>
      </div>
    </div>
  );
}

export default Slides;
****

  • mohamedhosamabd1
     + 1 comment

    here is my answer 

    function Slides({ slides }) {

  const [firstSlide, setFirstSlide] = useState(0)

  const nextSlide = () => {
    let silde = firstSlide ;
    silde++;
    setFirstSlide(silde)
  }
  const prevSlide = () => {
    let silde = firstSlide ;
    silde--;
    setFirstSlide(silde)
  }

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