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

stop watch timer in react

Abhishek answered on October 15, 2022 Popularity 7/10 Helpfulness 2/10

answer stop watch timer in react

related stopwatch timer in react js

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 2/10 Language javascript

Source: Grepper

Tags: javascript timer watch

Link to this answer
Share Copy Link

Contributed on Feb 11 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: timer javascript stopwatch j

Link to this answer
Share Copy Link

Contributed on Oct 15 2022

Maverick Seneris

0 Answers Avg Quality 2/10

stop watch timer in react

Contents

More Related Answers

stop watch timer in react

Closely Related Answers

stopwatch timer in react js

Grepper

Documentation

Social

Legal

Contact

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