JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>
Babel + JSX
function App() {
const [ seconds, setSeconds ] = React.useState(60);
const [ timerActive, setTimerActive ] = React.useState(false);
React.useEffect(() => {
if (seconds > 0 && timerActive) {
setTimeout(setSeconds, 100, seconds - 1);
} else {
setTimerActive(false);
}
}, [ seconds, timerActive ]);
return (
<div>
{seconds
? <React.Fragment>
<button onClick={() => setTimerActive(!timerActive)}>
{timerActive ? 'stop' : 'start'}
</button>
<div>{seconds}</div>
</React.Fragment>
: <button onClick={() => setSeconds(60)}>ещё раз</button>
}
</div>
);
}
ReactDOM.render(<App />, document.getElementById('app'));