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

stopwatch timer in react js

Add Answer

Maverick Seneris answered on October 15, 2022 Popularity 9/10 Helpfulness 5/10

answer stopwatch timer in react js

related stopwatch in react

related stop watch timer in react

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 stopwatch timer

Link to this answer
Share Copy Link

Contributed on Oct 15 2022

Maverick Seneris

0 Answers Avg Quality 2/10

Closely Related Answers

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 9/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Sep 15 2023

Abhishek

0 Answers Avg Quality 2/10

stop watch timer in react

Comment

import React, { useEffect, useState } from 'react'

const StopWatch = () => {
	const [minute, setMinute] = useState(0)
	const [seconds, setSeconds] = useState(0)
	const [isActive, setIsActive] = useState(false)

	useEffect(() => {
		let interval
		isActive &&
			(interval = setInterval(() => {
				setSeconds((sec) => {
					if (sec === 59) {
						setMinute((minutes) => minutes + 1)
						return 0
					}
					return sec + 1
				})
			}, 1000))
		return () => clearInterval(interval)
	}, [isActive])
	const handleReset = () => {
		setSeconds(0)
		setMinute(0)
		setIsActive(false)
	}
	const handleStart = () => {
		setIsActive((prev) => !prev)
	}
	return (
		<div>
			<div>
				<h2>StopWatch</h2>
				<h5>Minutes:{minute}</h5>
				<h5>Seconds:{seconds}</h5>
			</div>
			<div>
				<button type='button' onClick={handleStart}>
					{!isActive ? 'Start' : 'Stop'}
				</button>
				<button type='button' onClick={handleReset}>
					Reset
				</button>
			</div>
		</div>
	)
}

export default StopWatch

Popularity 7/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript timer ti

Link to this answer
Share Copy Link

Contributed on Feb 11 2023

Abhishek

0 Answers Avg Quality 2/10

stopwatch timer in react js

Contents

More Related Answers

stopwatch timer in react js

Closely Related Answers

stopwatch in react

stop watch timer in react

Grepper

Documentation

Social

Legal

Contact

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