Answer the question
In order to leave comments, you need to log in
How to stop setInterval in react when navigating between pages using NavLink?
React application, the setInterval function works on the page.
import React from "react";
import logo from "./logo/logo.svg";
import style from "./StartPage.module.css";
import Cell from "./Cell";
import { NavLink } from "react-router-dom";
export const change = (arr) => {
let i = -1;
setInterval(function () {
document.querySelector("i").className =
arr[(i = ++i == arr.length ? 0 : i)];
}, 1000);
};
const StartPage = () => {
const arrD = [style.indicator, style.indicatorleft];
change(arrD);
return (
<div className={style.grid}>
<img src={logo} alt="bugaga"></img>
<div className={style.radiobutton}>
<NavLink
onClick={() => {
clearInterval(change);
}}
to="/radio">
RadioButton
</NavLink>
<div className={style.list}>
<div className={style.cell}>
<div className={style.togle}>
<i className={style.indicatorleft}></i>
</div>
</div>
<Cell />
<Cell />
<Cell />
<Cell />
<Cell />
<Cell />
<Cell />
<Cell />
</div>
</div>
<div className={style.radio}>
<NavLink to="/button">Button</NavLink>
<div className={style.list}></div>
</div>
</div>
);
};
export default StartPage;
<div className={style.radiobutton}>
<NavLink
onClick={() => {
clearInterval(change);
}}
to="/radio">
RadioButton
</NavLink>
Answer the question
In order to leave comments, you need to log in
document.querySelector("i").className =
arr[(i = ++i == arr.length ? 0 : i)];
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question