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

|

38 Discussions

|

  • gpeteamd
     + 0 comments

    Working, and passed all tests

    import React from "react";

/**
 * 
 * @param {{slides: {title: string, text: string}}} 
 */
function Slides({ slides }) {
  const [activeSlideIndex, setActiveSlideIndex] = React.useState(0)
  const activeSlide = slides[activeSlideIndex]
  const isLastItem = activeSlideIndex === slides.length - 1
  const isFirstItem = activeSlideIndex === 0

  const handleRestart = () => {
    setActiveSlideIndex(0)
  }

  const handleNext = () => {
    if (isLastItem) {
      return null
    }
    setActiveSlideIndex(prev => prev + 1)
  }
  const handlePrev = () => {
    if (isFirstItem) {
      return null
    }
    setActiveSlideIndex(prev => prev - 1)
  }

  return (
    <div>
      <div id="navigation" className="text-center">
        <button onClick={handleRestart} disabled={isFirstItem} data-testid="button-restart" className="small outlined">Restart</button>
        <button onClick={handlePrev} disabled={isFirstItem} data-testid="button-prev" className="small">Prev</button>
        <button onClick={handleNext} disabled={isLastItem} data-testid="button-next" className="small">Next</button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{activeSlide.title}</h1>
        <p data-testid="text">{activeSlide.text}</p>
      </div>

    </div>
  );
}

export default Slides;

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

function Slides({ slides }) {
const [currentId, setCurrentId] = useState(0);

const handleRestart =()=>{
setCurrentId(0);
};
const handlePrev =()=>{
if(currentId>0){
setCurrentId(currentId -1);
}
};

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

export default Slides;

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