React Timer
Seconds Elapsed: {this.state.secondsElapsed}
);
}
```
At this point, we now have our state set up, and the state displayed, however our secondsElapsed is currently always 0, not really a great timer yet. How can we get it so that it changes every second, and also get our component to update the display?
## Timer Method
The second part is easy, React will re-render on state changes, so we don't have to explicitly tell it to re-render when our state changes, we just need to focus on the first part, update the state so that every second it increases by 1. So every 1 second or (1000 ms) we increment our secondsElapsed by 1, or simply add 1 to it. So, we'll need two parts to this:
1. Create a method to add 1 to secondsElapsed
2. Create something that will call the above method every 1 second or 1000 ms
For part 1, we can just take in the previous state, which is really only the secondsElapsed, and add one to it. Add the following code to your class, underneath your constructor. Remember, that state is an object, so when we use previous state here, we are getting the secondsElapsed specifically and adding one to it.
```javascript
tick() {
this.setState((prevState) => ({
secondsElapsed: prevState.secondsElapsed + 1
}));
}
```
Now that we have this method, we need some way to call it every single second. Since right now it just exists, and isn't being called by anything, so our timer is still reading 0 forever. We really want this to start counting after everything is good to go on the page, so we can setup a way to call this method every second within `componentDidMount()`. We can use `setInterval()`, a JavaScript method that repeats a given function at every given time-interval. Since we want our `tick()` method to happen every 1000ms, we can set that up. Remember that we need to use `this.tick()` to correctly be able to call our method. Type the following underneath our tick() method:
```javascript
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
console.log(this.interval);
}
```
Now you should be able to see your timer counting correctly!! Hooray!
## Error
There is one last thing to take care of, first, go to your timer app, and then navigate away from it. Notice that react throws you an error. You should see something like this, "Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.
Please check the code for the TimerApp component."
To fix this, we need to make sure that our interval is stopped when we no longer want to view this component, or in `componentWillUnmount()`. By stopping the interval in this lifecycle method, when we navigate away from this page, it will no longer continue to try and update the component. Write the following code below your `componentDidMount()`
```javascript
componentWillUnmount() {
clearInterval(this.interval);
console.log(this.interval);
}
```
Now, try navigating to another part of your app, for example home, and check to make sure that the error is no longer there. Awesome, we've finished our very simple timer app. The complete code is below if you need it for reference!
## The full code
```javascript
//Source: https://facebook.github.io/react/
import React, { Component } from 'react';
export default class TimerApp extends Component {
constructor(props) {
super(props);
this.state = {secondsElapsed: 0};
}
tick() {
this.setState((prevState) => ({
secondsElapsed: prevState.secondsElapsed + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
console.log(this.interval);
}
componentWillUnmount() {
clearInterval(this.interval);
console.log(this.interval);
}
render() {
return (