Estoy haciendo una actividad de un curso ReactJS
, que consiste en crear un cuadrado y darle un evento de overmouse
y cambie los colores cada un seg, lo hice y funciona, pero se debe dejar de ejecutar con un dobleClick y el clearInterval
no me estaría funcionando, alguien podría decirme porque ?:
const Cuadrado = () => {
let cuadradoColor = <div className="square-colors"></div>;
const [square, setSquare] = useState(cuadradoColor);
let changeColor=()=>{
let red = Math.floor((Math.random() * 255));
let green = Math.floor((Math.random() * 255));
let blue = Math.floor((Math.random() * 255 ));
let newSquare = <div style={{background:`rgb(${red},${green},${blue})`,
width: '255px', height: '255px', border: '2px solid rgb(170, 170, 170)',
cursor: 'pointer'}}></div>
setSquare(newSquare);
}
let intervalId;
function startInterval(){
if (!intervalId) {
intervalId= setInterval(changeColor, 1000);
}
};
function stopInterval (){
clearInterval(intervalId);
intervalId = null;
};
return (
<div onMouseOver={startInterval} onDoubleClick={stopInterval}>
{/*eslint-disable-next-line*/}
{square}
</div>
);
}