Develop Reference

How to replace react component with another when event triggered in that component

So, i (Total react beginner) have this React component.
import './cryptography.css';
import {useRef} from 'react';
import useInterval from 'react-useinterval';
import { useState } from 'react';
const DisplayTimer = () => {
const [time, setTime] = useState(0);
useInterval(() => {
setTime(time + 1);
}
, 1000);
const hours = Math.floor(time / 3600);
const minutes = Math.floor((time % 3600) / 60);
const seconds = time % 60;
return (
<div className="timer">
<h3>Timer</h3>
<p>{hours.toString().padStart(2, '0')}:{minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')}</p>
</div>
)
}
const CryptoOne = () => {
const inputRef = useRef();
function verifyAnswer() {
if (inputRef.current.value === "c6e24b99a8054ab24dd0323530b80819") {
alert("Correct!");
}
else {
alert("Wrong!");
}
}
return (
<div className="crypto-one">
<h3>Level One</h3>
<p>Convert this plaintext into an MD5 hash - "RollingStonesGatherNoMoss"</p>
<input ref={inputRef} type="text" id="one-answer" name="one-answer" />
<button onClick={verifyAnswer}>Submit</button>
</div>
)
}
const CryptoTwo = () => {
const inputRef = useRef();
function verifyAnswer() {
if (inputRef.current.value === "IaMaHackerManHaHa") {
alert("Correct!");
}
else {
alert("Wrong!");
}
}
return (
<div className="crypto-two">
<h3>Level Two</h3>
<p>Decode Caesar cipher into plaintext - "FxJxExzhboJxkExEx"</p>
<input ref={inputRef} type="text" id="two-answer" name="two-answer" />
<button onClick={verifyAnswer}>Submit</button>
</div>
)
}
const CryptoThree = () => {
const inputRef = useRef();
function verifyAnswer() {
let input = inputRef.current.value;
let answer = "SHA256".toLowerCase();
if (input === answer) {
alert("Correct!, completed the exercise");
}
else {
alert("Wrong!");
}
}
return (
<div className="crypto-three">
<h3>Level Three</h3>
<p>Identify the type of the hash (Type only the hash type, with no spaces) - "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"</p>
<input ref={inputRef} type="text" id="three-answer" name="three-answer" />
<button onClick={verifyAnswer}>Submit</button>
</div>
)
}
const Cryptography = () => {
const [active, setActive] = useState("crypto-one");
return (
<div className="cryptography">
<h1>Cryptography</h1>
<DisplayTimer />
<div className="crypto-container">
<CryptoOne />
</div>
</div>
)
}
export { Cryptography };
Here, i have this cryptography function that will display a question and if it is correct, that question will be replaced with another.
I have 3 seperate functions CryptoOne, CryptoTwo and CryptoThree which will be displayed in function Cryptography. So that means if the answer for the question for CryptoOne is correct, then it will be replaced with CryptoTwo and so on. So my questions is HOW DO I DO IT?
Thanks in advance.

ANSWER TO YOUR LAST COMMENT TO HANDLE TIMER
Instead of using react-useinterval you could create a useTimer() hook of your own
import { useEffect, useRef, useState } from "react";
const useTimer = () => {
const [time, setTime] = useState(0);
const hours = Math.floor(time / 3600);
const minutes = Math.floor((time % 3600) / 60);
const seconds = time % 60;
let interval = useRef();
useEffect(() => {
interval.current = setInterval(() => {
setTime(prevTime => prevTime + 1);
}, 1000);
return () => {
clearInterval(interval.current);
};
}, [setTime]);
const stopTimer = () => {
clearInterval(interval.current);
};
return { hours, minutes, seconds, stopTimer };
};
export default useTimer;
You can maintain a activeIndex state in Cryptography component. And have a changeSlide method which increments activeSlideIndex by 1 everytime the answer is correct. As shown below
TIMER RELATED COMMENT
Use that hook in Cryptography component. Pass hours, minutes & seconds as props in DisplayTimer component. And pass stopTimer function to CryptoThree component & use it when final answer is complete
const Cryptography = () => {
const [active, setActive] = useState("crypto-one");
const [activeIndex, setActiveIndex] = useState(1);
const { hours, minutes, seconds, stopTimer } = useTimer();
const incrementIndex = () => {
setActiveIndex(prevIndex => prevIndex + 1);
};
return (
<div className="cryptography">
<h1>Cryptography</h1>
<DisplayTimer hours={hours} minutes={minutes} seconds={seconds} />
<div className="crypto-container">
{activeSlideIndex === 1 && <CryptoOne changeIndex={incrementIndex} />}
{activeSlideIndex === 2 && <CryptoTwo changeIndex={incrementIndex} />}
{activeSlideIndex === 3 && <CryptoThree stopTimer={stopTimer} />}
</div>
</div>
);
};
const DisplayTimer = ({ hours, minutes, seconds }) => {
return (
<div className="timer">
<h3>Timer</h3>
<p>
{hours.toString().padStart(2, "0")}:
{minutes.toString().padStart(2, "0")}:
{seconds.toString().padStart(2, "0")}
</p>
</div>
);
};
You can pass this changeSlide() method as a prop in every component.
And call it whenever the answer is correct
const CryptoOne = ({ changeIndex }) => {
const inputRef = useRef();
function verifyAnswer() {
if (inputRef.current.value === "c6e24b99a8054ab24dd0323530b80819") {
alert("Correct!");
changeIndex();
} else {
alert("Wrong!");
}
}
return (
<div className="crypto-one">
<h3>Level One</h3>
<p>
Convert this plaintext into an MD5 hash - "RollingStonesGatherNoMoss"
</p>
<input ref={inputRef} type="text" id="one-answer" name="one-answer" />
<button onClick={verifyAnswer}>Submit</button>
</div>
);
};
const CryptoTwo = ({ changeIndex }) => {
const inputRef = useRef();
function verifyAnswer() {
if (inputRef.current.value === "IaMaHackerManHaHa") {
alert("Correct!");
changeIndex();
} else {
alert("Wrong!");
}
}
return (
<div className="crypto-two">
<h3>Level Two</h3>
<p>Decode Caesar cipher into plaintext - "FxJxExzhboJxkExEx"</p>
<input ref={inputRef} type="text" id="two-answer" name="two-answer" />
<button onClick={verifyAnswer}>Submit</button>
</div>
);
};
const CryptoThree = ({stopTimer) => {
const inputRef = useRef();
function verifyAnswer() {
let input = inputRef.current.value;
let answer = "SHA256".toLowerCase();
if (input === answer) {
alert("Correct!, completed the exercise");
stopTimer(); // Use stopTimer here when exercise is complete
} else {
alert("Wrong!");
}
}
return (
<div className="crypto-three">
<h3>Level Three</h3>
<p>
Identify the type of the hash (Type only the hash type, with no spaces)
- "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
</p>
<input ref={inputRef} type="text" id="three-answer" name="three-answer" />
<button onClick={verifyAnswer}>Submit</button>
</div>
);
};

Switch between songs in the audio Player

I am trying to switch between songs in next js using the use effect hook but everything works perfectly when I click the button the song start automatically and the song switch but the color behind the progress bar does match the current time because it getting the progress of the first song that is loaded in the browser how can I fix this using the use Effect or other method?
if you noticed is does not load properly at the first time when you click the button to switch the song but when you click the play / pause button it fixed I don't know why.
Also it give me the last value not the actual value I mean I need for example the 140 but it always gave me the 247 value the prev Value
post: is the part // ! useEffect to change the audio
import React, { useState, useRef, useEffect } from "react";
import styles from "../styles/AudioPlayer.module.css";
import { BiLeftArrowAlt } from "react-icons/bi";
import { BiRightArrowAlt } from "react-icons/bi";
import { FaPlay } from "react-icons/fa";
import { FaPause } from "react-icons/fa";
const AudioPlayer = () => {
// ! state
const [isPlaying, setIsPlaying] = useState(false);
const [duration, setDuration] = useState(0);
const [currentTime, setCurrentTime] = useState(0);
const [audio, setAudio] = useState(null);
const chapters = [
{
// start: 0,
// end: 40,
start: 0,
end: 8,
},
{
start: 135,
end: 140,
// start: 100,
// end: 140,
},
];
const Elvis = "../audios/AudioElvis.mp3";
const GetLucky = "../audios/GetLucky.mp3";
// ! refs
const audioPlayer = useRef(); // ? reference to the audio component
const progressBar = useRef(); // ? reference to the progress bar
const animationRef = useRef(); // ? reference to the animation
// ! useEffect to handle the audio player
useEffect(() => {
const seconds = Math.floor(audioPlayer.current.duration);
setDuration(seconds);
// ! current is a reference to the current item
// ? max is the reference given by the progress bar
progressBar.current.max = seconds;
}, [audioPlayer?.current?.loadedmetadata, audioPlayer?.current?.readyState]);
// ! useEffect to handle the end of the audio
useEffect(() => {
if (currentTime == duration && isPlaying) {
togglePlayPause();
timeTravel(0);
}
}, [currentTime]);
// ! useEffect to change the audio
useEffect(() => {
if (audio && !isPlaying) {
if (audio === Elvis) {
setDuration(140);
} else if (audio === GetLucky) {
setDuration(247);
}
console.log("audio", audio);
console.log("duration", duration);
setDuration(audioPlayer.current.duration);
audioPlayer.current.src = audio;
audioPlayer.current.load(); // ? load the audio
togglePlayPause();
timeTravel(0);
} else if (audio && isPlaying) {
if (audio === Elvis) {
setDuration(140);
} else if (audio === GetLucky) {
setDuration(247);
}
console.log("audio", audio);
console.log(audio === Elvis);
console.log(audio === GetLucky);
console.log("duration", duration);
audioPlayer.current.src = audio;
audioPlayer.current.load(); // ? load the audio
audioPlayer.current.play();
timeTravel(0);
}
}, [audio]);
// ! FUNCTIONS
const calculateTime = (secs) => {
const minutes = Math.floor(secs / 60);
const returnedMinutes = minutes < 10 ? `0${minutes}` : minutes;
const seconds = Math.floor(secs % 60);
const returnedSeconds = seconds < 10 ? `0${seconds}` : seconds;
return `${returnedMinutes}:${returnedSeconds}`;
};
const togglePlayPause = () => {
const prevValue = isPlaying;
setIsPlaying(!prevValue);
if (!prevValue) {
audioPlayer.current.play();
// ? requestAnimationFrame is a function that allows us to run a function
// ? every frame of the animation
animationRef.current = requestAnimationFrame(whilePlaying);
} else {
audioPlayer.current.pause();
cancelAnimationFrame(animationRef.current);
}
};
// ! Creating our animation function => whilePlaying
const whilePlaying = () => {
progressBar.current.value = audioPlayer.current.currentTime;
changePlayerCurrentTime();
animationRef.current = requestAnimationFrame(whilePlaying);
};
// ! Changing the range of the progress bar FUNCTION
const changeRange = () => {
// ! Setting our audio current time to the value of the progress bar
audioPlayer.current.currentTime = progressBar.current.value;
changePlayerCurrentTime();
};
const changePlayerCurrentTime = () => {
// ! Updating the progress bar in CSS
// ? progressBar.current.style.setProperty => takes two arguments
// ? first is the property name
// ? second is the value of the property
// console.log("bar", progressBar.current.value);
// console.log("duration", duration);
progressBar.current.style.setProperty(
"--seek-before-width",
`${(progressBar.current.value / duration) * 100}%`
);
setCurrentTime(progressBar.current.value);
};
const backThirty = () => {
progressBar.current.value = Number(progressBar.current.value) - 30;
changeRange();
};
const forwardThirty = () => {
progressBar.current.value = Number(progressBar.current.value) + 30;
changeRange();
};
const timeTravel = (newTime) => {
progressBar.current.value = newTime;
changeRange();
};
// // ! Changing the audio source
// const changeSong = (song) => {
// setAudio(song);
// setIsPlaying(false);
// timeTravel(0);
// };
return (
<div className={styles.audioPlayer}>
{/* Audio Player Reference */}
<audio
ref={audioPlayer}
// src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
src={Elvis}
preload="metadata"
></audio>
{/* End of the Audio Player Reference */}
{/* Current Time */}
<div className={styles.currentTime}>{calculateTime(currentTime)}</div>
{/* Progress Bar */}
<div className={styles.progressBarWrapper}>
<input
type="range"
className={styles.progressBar}
defaultValue="0"
ref={progressBar}
onChange={changeRange}
step="0.05"
/>
{/* Chapters Video 2 */}
{chapters.map((chapter, i) => {
const leftStyle = (chapter.start / duration) * 100;
const widthStyle = ((chapter.end - chapter.start) / duration) * 100;
return (
<div
key={i}
className={`${styles.chapter} ${
chapter.start === 0 && styles.start
} ${chapter.end === duration && styles.end}`}
style={{
"--left": `${leftStyle}%`,
"--width": `${widthStyle}%`,
}}
></div>
);
})}
</div>
{/* Duration */}
<div className={styles.duration}>
{duration && !isNaN(duration) ? calculateTime(duration) : "0:00"}
</div>
{/* Controls */}
<div className={styles.controls}>
<button className={styles.forwardBackward} onClick={backThirty}>
<BiLeftArrowAlt /> 30
</button>
<button onClick={togglePlayPause} className={styles.playPause}>
{isPlaying ? <FaPause /> : <FaPlay className={styles.play} />}
</button>
<button className={styles.forwardBackward} onClick={forwardThirty}>
30 <BiRightArrowAlt />
</button>
</div>
<div>
<button onClick={() => setAudio(Elvis)}>Elvis Song</button>
<button onClick={() => setAudio(GetLucky)}>Get Lucky Song</button>
</div>
</div>
);
};
export { AudioPlayer };
// ! the {} means that this is a named export

How to seperate the two functions in ReactJS?

Introduction
I am building the countdown timer, which I had built but now I want to scale it up. So I am building two countdowns on the same page with each of them having separate start, stop buttons, and common reset button.
What do I have?
I have implemented but they are not working independently. For example, when I click on the stop of the upper clock, it also stops the lower clock.
What do I want?
I wanted to have separate functions for both of them but on the same page.
Code
Most of the things are repeated in the code.
import React, { useState, useEffect, useRef } from "react";
import "./styles.css";
const STATUS = {
STARTED: "Started",
STOPPED: "Stopped"
};
const STATUSp1 = {
STARTED: "Started",
STOPPED: "Stopped"
};
export default function InputCountDown() {
const [time, setTime] = useState(0);
const [timep1, setTimep1] = useState(0);
const [inc, setInc] = useState(0);
const handleOnChange = (e) => {
//console.log(e.target.value);
setTime(e.target.value);
setTimep1(e.target.value);
};
const handleOnChangeIncrement = (e) => {
console.log(e.target.value);
setInc(e.target.value);
};
const [secondsRemaining, setSecondsRemaining] = useState(time * 60);
const [secondsRemainingp1, setSecondsRemainingp1] = useState(timep1 * 60);
//console.log(time);
const [status, setStatus] = useState(STATUS.STOPPED);
const [statusp1, setStatusp1] = useState(STATUSp1.STOPPED);
const secondsToDisplay = secondsRemaining % 60;
const minutesRemaining = (secondsRemaining - secondsToDisplay) / 60;
const minutesToDisplay = minutesRemaining % 60;
const hoursToDisplay = (minutesRemaining - minutesToDisplay) / 60;
const secondsToDisplayp1 = secondsRemainingp1 % 60;
const minutesRemainingp1 = (secondsRemainingp1 - secondsToDisplayp1) / 60;
const minutesToDisplayp1 = minutesRemainingp1 % 60;
const hoursToDisplayp1 = (minutesRemainingp1 - minutesToDisplayp1) / 60;
const handleStart = () => {
setStatus(STATUS.STARTED);
setSecondsRemaining(time * 60);
};
const handleStartp1 = () => {
setStatusp1(STATUSp1.STARTED);
setSecondsRemainingp1(timep1 * 60);
};
const handleStop = () => {
setStatus(STATUS.STOPPED);
};
const handleStopp1 = () => {
setStatusp1(STATUSp1.STOPPED);
};
const handleReset = () => {
setStatus(STATUS.STOPPED);
setSecondsRemaining(time * 60);
setSecondsRemainingp1(timep1 * 60);
};
useInterval(
() => {
if (secondsRemaining > 0) {
setSecondsRemaining(secondsRemaining - 1);
} else {
setStatus(STATUS.STOPPED);
}
if (secondsRemainingp1 > 0) {
setSecondsRemainingp1(secondsRemainingp1 - 1);
} else {
setStatusp1(STATUSp1.STOPPED);
}
},
status === STATUS.STARTED ? 1000 : null,
statusp1 === STATUSp1.STARTED ? 1000 : null
// passing null stops the interval
);
return (
<>
<div className="App">
<h1>Countdown Using Input</h1>
<div style={{ padding: "12px" }}>
<label htmlFor="time"> Enter time in minutes </label>
<input
type="text"
id="time"
name="time"
value={time}
onChange={(e) => handleOnChange(e)}
/>
</div>
<div style={{ padding: "12px" }}>
<label htmlFor="inc"> Enter increment </label>
<input
type="number"
id="inc"
name="inc"
value={inc}
onChange={(e) => handleOnChangeIncrement(e)}
/>
</div>
<button onClick={handleStart} type="button">
Start
</button>
<button onClick={handleStop} type="button">
Stop
</button>
<button onClick={handleReset} type="button">
Reset
</button>
<div>
<button
onClick={() =>
setSecondsRemaining(secondsRemaining + parseInt(inc, 10))
}
>
Increment {inc} sec
</button>
</div>
<div style={{ padding: 20, fontSize: "40px" }}>
{twoDigits(hoursToDisplay)}:{twoDigits(minutesToDisplay)}:
{twoDigits(secondsToDisplay)}
</div>
<div>Status: {status}</div>
<div style={{ padding: 20, fontSize: "40px" }}>
{twoDigits(hoursToDisplayp1)}:{twoDigits(minutesToDisplayp1)}:
{twoDigits(secondsToDisplayp1)}
</div>
<button onClick={handleStartp1} type="button">
Start_p1
</button>
<button onClick={handleStopp1} type="button">
Stop_p1
</button>
<button onClick={handleReset} type="button">
Reset_p1
</button>
</div>
</>
);
}
// source: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
// https://stackoverflow.com/a/2998874/1673761
const twoDigits = (num) => String(num).padStart(2, "0");
You can also find the code in the codesandbox in the inputCountDown.js file .
You can ignore increment button
Please help me !!!

You are using the same interval for two different counters, which causes them to sync up on the same time. Nevertheless, this code is handling too many responsibilities at once and contains unnecessary duplications that is polluting the readability of the code.
Instead of duplicating the same code with different variables names, try extracting it into its own component, and call that component twice. This way, more code isolation is ensured and is definitely less error prone, while improving readability.

Seperate the useInterval logic for each of the timer
useInterval(
() => {
if (secondsRemaining > 0) {
setSecondsRemaining(secondsRemaining - 1);
} else {
setStatus(STATUS.STOPPED);
}
},
status === STATUS.STARTED ? 1000 : null
);
useInterval(
() => {
if (secondsRemainingp1 > 0) {
setSecondsRemainingp1(secondsRemainingp1 - 1);
} else {
setStatusp1(STATUSp1.STOPPED);
}
},
statusp1 === STATUSp1.STARTED ? 1000 : null
// passing null stops the interval
);

React interval timer is not exiting when countdown gets to zero

probably a simple answer to my issue, but it is one that I cannot figure out. My countdown keeps on going past zero and into the negatives, I would like it to end when it hits zero. What am I doing wrong?
Thanks!
const [staticCountdown, setStaticCountdown] = useState(15);
const [countdown, setCountdown] = useState(15);
const setCount = (count) => {
if (!props.timerActive) {
setStaticCountdown(count);
setCountdown(count);
}
};
useEffect(() => {
let interval = null;
if (props.timerActive) {
interval = setInterval(() => {
setCountdown(countdown => countdown - 1);
}, 1000);
} else if (!props.timerActive && countdown === 0) {
clearInterval(interval);
}
return () => clearInterval(interval);
}, [props.timerActive, countdown]);

You should change
else if (!props.timerActive && countdown === 0)
into
(if (!props.timerActive || countdown === 0)
here is an example based on you code:
const {
useEffect,
useState
} = React;
function App(){
const [timerActive, setTimerActive] = useState(true);
const handleTimerActive = () => {
setTimerActive((prev) => !prev);
};
return (
<div className="App">
<Timer timerActive={timerActive} />
<button onClick={handleTimerActive}>
{timerActive ? "Stop" : "Run"}
</button>
</div>
);
}
function Timer(props) {
const [countdown, setCountdown] = useState(15);
useEffect(() => {
let interval = null;
if (props.timerActive) {
interval = setInterval(() => {
setCountdown((countdown) => countdown - 1);
}, 1000);
}
if (!props.timerActive || countdown === 0) {
clearInterval(interval);
}
return () => clearInterval(interval);
}, [props.timerActive, countdown]);
const handleReset = () => {
setCountdown(15);
};
return (
<div>
<h1>{countdown}</h1>
<button onClick={handleReset}>Reset</button>
</div>
);
}
ReactDOM.render( <App/> ,
document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Is some wrong with this call stack in this react component?

I was trying to make a stopwatch counter however when I call the "startTimer" function, the setInterval function is fired before the setStartTime (is fired after I click the start button for the second time).
import React from "react";
import { useState, useRef } from "react";
import RunButton from "./RunButton";
const RunTimer = () => {
const [timerOn, setTimerOn] = useState(false);
const [startTime, setStartTime] = useState(0);
const [timerTime, setTimerTime] = useState(0);
const timerInterval = useRef(null);
const startTimer = () => {
setTimerOn(true);
setStartTime(Date.now() - timerTime);
timerInterval.current = setInterval(() => {
setTimerTime(Date.now() - startTime);
}, 1000);
};
const stopTimer = () => {
setTimerOn(false);
clearInterval(timerInterval);
};
const resetTimer = () => {
setStartTime(0);
setTimerTime(0);
};
let seconds = Math.floor(timerTime / 1000) % 60;
let minutes = Math.floor(timerTime / 1000 / 60) % 60;
return (
<div className="text-6xl font-medium text-center">
{minutes < 10 ? `0${minutes}` : minutes}:
{seconds < 10 ? `0${seconds}` : seconds}
<div className="flex gap-10 justify-around">
<RunButton title="start" action={startTimer} />
<RunButton title="stop" color="red" action={stopTimer} />
<RunButton action={resetTimer} color="yellow" title="reset" />
</div>
</div>
);
};
export default RunTimer;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I still dont understand why you need Date.now() to create a stopwatch.
What is wrong with:
const RunTimer = () => {
const [time, setTime] = useState(0);
const timerInterval = useRef(null);
const startTimer = () => {
if (!timerInterval.current) {
timerInterval.current = setInterval(() => {
setTime((t) => t + 1000);
}, 1000);
}
};
const stopTimer = () => {
clearInterval(timerInterval.current);
timerInterval.current = null;
};
const resetTimer = () => {
setTime(0);
};
const seconds = Math.floor(time / 1000) % 60;
const minutes = Math.floor(time / 1000 / 60) % 60;
useEffect(() => {
return () => clearInterval(timerInterval.current);
}, []);
return (
<div className="text-6xl font-medium text-center">
{minutes < 10 ? `0${minutes}` : minutes}:
{seconds < 10 ? `0${seconds}` : seconds}
<div className="flex gap-10 justify-around">
<button title="start" onClick={startTimer}>
start
</button>
<button title="start" onClick={stopTimer}>
stop
</button>
<button title="start" onClick={resetTimer}>
reset
</button>
</div>
</div>
);
};