Question

1. Create a timer in REACT JS using any library application which asks the user for minutes. The user then click Start button and starts the timer count down.

Answer 1

Hi,

Please add this code in HTML:

<div id="timer"></div>

Please add the below code in JS file:

class Timer extends React.Component {
constructor (props) {
super(props)
this.state = {count: 1}
}
componentWillUnmount () {
clearInterval(this.timer)
}
tick () {
this.setState({count: (this.state.count + 1)})
}
startTimer () {
clearInterval(this.timer)
this.timer = setInterval(this.tick.bind(this), 1000)
}
stopTimer () {
clearInterval(this.timer)
}
render () {
return (
<div className='timer'>
<h1>{this.state.count}</h1>
<div>
<label>
Enter the minutes:
<input type="text" name="name" />
</label><br />
<button onClick={this.startTimer.bind(this)}>Start</button> <button onClick={this.stopTimer.bind(this)}>Stop</button>
</div>
</div>
)
}
}

ReactDOM.render(
<Timer />,
document.getElementById('timer')
)

Please let me know if you any questions.

Happy Learning!