Question: Explain simple React.JS code line by line, and solve a simple problem how to delete decimal and only shows time like 2 S instead of
Explain simple React.JS code line by line, and solve a simple problem how to delete decimal and only shows time like 2 S instead of 2.002S.
This is a simple Timer APP.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
Timer
);
}
}
class Stopwatch extends Component {
state = {
status: false,
runningTime: 0
};
handleClick = () => {
this.setState(state => {
if (state.status) {
clearInterval(this.timer);
} else {
const startTime = Date.now() - this.state.runningTime;
this.timer = setInterval(() => {
this.setState({ runningTime: (Date.now() - startTime)/1000 });
}, 1000);
}
return { status: !state.status };
});
};
handleReset = () => {
clearInterval(this.timer); // new
this.setState({ runningTime: 0, status: false });
};
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
const { status, runningTime } = this.state;
return (
{runningTime}s
{status ? 'Stop' : 'Start'}
Reset
);
}
}
export default App;
Here is the result screenshot:
Timer 2.002s StartReset Timer 2.002s StartReset
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
Study Help