setTimeout & setInterval using with React hooks, (automatic slider )

Question

I made a slider (,manual slider) and tried to make it automatic too but failed.. I want that on clicking arrow buttons , the clear Interval gets call but the , one warning appears , that interval (const interval = setInterval(() => {setX(x => x + 100)}, 1000);) is not used..................... Please help me to know where i'm wrong

import React, { useState, useEffect } from "react";
import "./Slider.scss";
import ImgComp from "./ImgComp";
import pro1 from "./Images/pro1.jpeg";
import pro2 from "./Images/pro2.jpeg";
import pro3 from "./Images/pro3.jpeg";
import { IoIosArrowForward } from "react-icons/io";
import { IoIosArrowBack } from "react-icons/io";

function Slider() {
  let sliderArr = [
    <ImgComp src={pro1} />,
    <ImgComp src={pro2} />,
    <ImgComp src={pro3} />,
    <ImgComp src={pro1} />,
    <ImgComp src={pro2} />,
    <ImgComp src={pro3} />
  ];
  
  const [x, setX] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {setX(x => x + 100)}, 1000); // for automatic slider
    //return() =>{}
  }, []);

  const goLeft = () => {
    clearInterval(interval) // to stop slider 
    x === 0 ? setX(-100 * (sliderArr.length - 1)) : setX(x + 100);
  };
  const goRight = () => {
    x === -100 * (sliderArr.length - 1) ? setX(0) : setX(x - 100);
  };



  

  return (
    <div className="slider">
      {sliderArr.map((item, index) => {
        return (
          <div
            key={index}
            className="slide"
            style={{ transform: translateX(${x}%) }} >
            {item}
          </div>
        );
      })}
      <button id="goLeft" onClick={goLeft}  >
        <i>
          <IoIosArrowBack />
        </i>
      </button>
      <button id="goRight" onClick={goRight}>
        <i>
          <IoIosArrowForward />
        </i>
      </button>
    </div>
  );
}
export default Slider;

/*Actually, this is .scss file */


.slider{
  position: relative;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  overflow:hidden;
  background: black;
  i{
    font-size: 2vw;
  }
}

.slide{
  min-width: 100%;
  height: 80%;
  transition: 0.5s;
  overflow:hidden;
}

%btn-styles {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10%;
  height: 80%;
  background: none;
  border:none;
  outline: none;
  transition: 0.5s;
  &:hover{
    background-color: rgba(199, 195, 195, 0.301);
    cursor: pointer;
    i{
      color:whitesmoke
    }
  }
}

#goLeft{
  left:0;
  @extend %btn-styles;
}

#goRight{
  right:0;
  @extend %btn-styles;
}

Does this answer your question? [State not updating when using React state hook within setInterval](https://stackoverflow.com/questions/53024496/state-not-updating-when-using-react-state-hook-within-setinterval) — ShinaBR2, Jul 05 '20 at 08:18

score 0 · Answer 1 · answered Jul 05 '20 at 08:16

I think the problem you are having is because of "interval"s scope. Its defined inside the useEffect, which has a different scope than the Component. When calling clearInterval(interval), interval is not defined because its out of its scope. To fix that you have to define the interval outside of the useEffect:

 const [x, setX] = useState(0);

 let interval; // can also go outside of component (even better!).
  useEffect(() => {
    interval = setInterval(() => {setX(x => x + 100)}, 1000); // for automatic slider
    //return() =>{}
  }, []);

  const goLeft = () => {
    clearInterval(interval) // to stop slider 
    x === 0 ? setX(-100 * (sliderArr.length - 1)) : setX(x + 100);
  };
  const goRight = () => {
    x === -100 * (sliderArr.length - 1) ? setX(0) : setX(x - 100);
  };

One remark: Since you are clearing the interval when you goLeft, but not goRight, you have inconsistent behavior and once you click goLeft, your interval will never start again. You might want to check that if thats the desired behavior.?

how to do it i hooks ... not getting idea to change scope – Jul 05 '20 at 08:42 — , Jul 05 '20 at 08:42

setTimeout & setInterval using with React hooks, (automatic slider )

1 Answers1