Junior — Middle+
Detect and fix errors in a React component
livecode
Task condition
The task requires identifying and fixing syntax and logical errors in the provided React application code snippet.
import { useState, useEffect } from "react";
import "./App.css";
export default function App() {
const [started, setStarted] = useState(false);
const [currentTime, setCurrentTime] = useState(0);
const intervalId = useRef(null);
const stopHandler = () => {
setCurrentTime(0);
setStarted(false);
clearInterval(intervalId.current);
intervalId.current = null;
};
const startHandler = () => {
if (started) {
clearInterval(intervalId.current);
intervalId.current = null;
} else {
intervalId.current = setInterval(() => {
setCurrentTime((prev) => prev + 1);
}, 1000);
}
setStarted(!started);
};
useEffect(() => {
if (currentTime % 5 === 0 && currentTime !== 0) {
document.querySelector('.timer').classList.add("pulsate");
}
}, [currentTime]);
return (
<main className="main">
<div>
<button onClick={startHandler}>{started ? "Pause" : "Start"}</button>
<button onClick={stopHandler}>Stop</button>
<div className="timer">{currentTime}</div>
</div>
</main>
);
}
Your task is to analyze the code, identify all issues (incorrect imports, typos, wrong references to functions and properties, JSX errors, etc.) and suggest a correct version.