In the code below i want to start a countdown after clicking the button but the state variables are not updating.
import React,{useState} from 'react';
import ReactDOM from 'react-dom';
function Main(){
let[time, setTime] = useState(25);
let[milliseconds, setMilliseconds] = useState(time * 60 * 1000);
let[minutes, setMinutes] = useState(Math.floor(milliseconds/60000));
let[seconds, setSeconds] = useState((milliseconds % 60000)/1000);
const onClickHandler = () => {
setMilliseconds(milliseconds - 1000);
setMinutes(Math.floor(milliseconds/60000));
setSeconds((milliseconds % 60000)/1000)
}
const onClickTrigger = () => {setInterval(onClickHandler, 1000)}
return(
<div>
<h1> Count Down </h1>
<Timer
seconds = {seconds}
minutes = {minutes}
onClickHandler = {onClickTrigger}
/>
</div>
)
}
const Timer = (props) => {
return(
<React.Fragment>
<p>
{props.minutes.toString().padStart(2, '0')} :
{props.seconds.toString().padStart(2, '0')}
</p>
<button onClick = {props.onClickHandler} > Click </button>
</React.Fragment>
)
}
ReactDOM.render(<Main />, document.getElementById('root'));
What could be the problem?
This is the HTML code
<body>
<div id="root"> </div>
</body>
You can try it on On Scrimba. I want the countdown to start after clicking the button.