Sobes.tech
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.