Sort by

recency

|

13 Discussions

|

  • + 0 comments
    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)}>
              Restart
            </button>
            <button data-testid="button-prev" className="small" onClick={()=> setIndex(index > 0 && index-1)} disabled={index == 0}>
              Prev
            </button>
            <button data-testid="button-next" className="small"  onClick={()=> setIndex(index+1)} disabled={index == slides.length-1}>
              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;
    
  • + 0 comments

    I successfully built this React-based slideshow for HackerRank, but I now want to integrate it into my WordPress photography website. Should I use a plugin like WP Reactivate or manually insert it using a shortcode?

  • + 0 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;
    
  • + 0 comments

    import React, { useState } from 'react';

    function Slides({ slides }) { const [currentSlide, setCurrentSlide] = useState(0);

    const handleNext = () => { if (currentSlide < slides.length - 1) { setCurrentSlide(currentSlide + 1); } };

    const handlePrev = () => { if (currentSlide > 0) { setCurrentSlide(currentSlide - 1); } };

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

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

    ); }

    export default Slides;

  • + 0 comments
    import React, { useState } from "react";
    
    function Slides({ slides }) {
      const [index, setIndex] = useState(0)
    
      const handleRestart = () => setIndex(0)
      const handlePrev = () => setIndex(prev => prev - 1)
      const handleNext = () => setIndex(prev => prev + 1)
    
      return (
        <div>
          <div id="navigation" className="text-center">
            <button data-testid="button-restart" className="small outlined" disabled={index == 0} onClick={handleRestart}>
              Restart
            </button>
            <button data-testid="button-prev" className="small" onClick={handlePrev} disabled={index == 0}>
              Prev
            </button>
            <button data-testid="button-next" className="small" onClick={handleNext} disabled={index == slides.length - 1}>
              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;