Breaking News: Grepper is joining You.com. Read the official announcement!

stopwatch in react

Add Answer

Abhishek answered on October 15, 2022 Popularity 8/10 Helpfulness 5/10

answer stopwatch in react

related stopwatch timer in react js

related stopwatch by react

stopwatch in react

Comment

// *Stopwatch

import { useEffect, useState } from "react";

const StopwatchTry = () => {
  const [time, setTime] = useState({
    min: 0,
    sec: 0,
  });
  const [runing, setRunning] = useState(false);

  useEffect(() => {
    let interval;
    if (runing) {
      interval = setInterval(() => {
        setTime((prev) => ({
          ...prev,
          sec: prev.sec + 1,
        }));
      }, 1000);
    } else {
      clearInterval(interval);
    }
    return () => {
      clearInterval(interval);
    };
  }, [runing]);

  const start = () => {
    setRunning(true);
  };

  const stop = () => {
    setRunning(false);
  };
  const reset = () => {
    setTime({
      min: 0,
      sec: 0,
    });
  };
  return (
    <>
      <div>
        {time.min}m {time.sec}s
      </div>
      <div>
        <button onClick={start}>Start</button>
        <button onClick={stop}>Stop</button>
        <button onClick={reset}>Reset</button>
      </div>
    </>
  );
};

export default StopwatchTry;

Popularity 8/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: javascript stopwatch

Link to this answer
Share Copy Link

Contributed on Sep 15 2023

Abhishek

0 Answers Avg Quality 2/10

Closely Related Answers

stopwatch timer in react js

Comment

import React, { useState } from "react";
import "./StopWatch.css";
import Timer from "../Timer/Timer";
import ControlButtons from "../ControlButtons/ControlButtons";
  
function StopWatch() {
  const [isActive, setIsActive] = useState(false);
  const [isPaused, setIsPaused] = useState(true);
  const [time, setTime] = useState(0);
  
  React.useEffect(() => {
    let interval = null;
  
    if (isActive && isPaused === false) {
      interval = setInterval(() => {
        setTime((time) => time + 10);
      }, 10);
    } else {
      clearInterval(interval);
    }
    return () => {
      clearInterval(interval);
    };
  }, [isActive, isPaused]);
  
  const handleStart = () => {
    setIsActive(true);
    setIsPaused(false);
  };
  
  const handlePauseResume = () => {
    setIsPaused(!isPaused);
  };
  
  const handleReset = () => {
    setIsActive(false);
    setTime(0);
  };
  
  return (
    <div className="stop-watch">
      <Timer time={time} />
      <ControlButtons
        active={isActive}
        isPaused={isPaused}
        handleStart={handleStart}
        handlePauseResume={handlePauseResume}
        handleReset={handleReset}
      />
    </div>
  );
}
  
export default StopWatch;

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: www.geeksforgeeks.org

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Oct 15 2022

Maverick Seneris

0 Answers Avg Quality 2/10

stopwatch by react

Comment

const Stopwatch = () => {
  const [time, setTime] = useState(0);
  const [running, setRunning] = useState(false);
  useEffect(() => {
    let interval;
    if (running) {
      interval = setInterval(() => {
        setTime((prevTime) => prevTime + 10);
      }, 10);
    } else if (!running) {
      clearInterval(interval);
    }
    return () => clearInterval(interval);
  }, [running]);
  return (
    <div className="stopwatch">
      <div className="numbers">
        <span>{("0" + Math.floor((time / 60000) % 60)).slice(-2)}:</span>
        <span>{("0" + Math.floor((time / 1000) % 60)).slice(-2)}:</span>
        <span>{("0" + ((time / 10) % 100)).slice(-2)}</span>
      </div>
      <div className="buttons">
        <button onClick={() => setRunning(true)}>Start</button>
        <button onClick={() => setRunning(false)}>Stop</button>
        <button onClick={() => setTime(0)}>Reset</button>       
      </div>
    </div>
  );
};
Code language: JavaScript (javascript)

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: w3collective.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Mar 01 2023

Better Buzzard

0 Answers Avg Quality 2/10

stopwatch in react

Contents

More Related Answers

stopwatch in react

Closely Related Answers

stopwatch timer in react js

stopwatch by react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.