Build React Apps | Create a Clock Timer Using React 05 | PART2 |

List Of Content

ADS Area (CARBON)

ADS Area (CARBON)

 

Overview

So in the First part we have covered the basic rendering setup and staring/stopping the timer alongside the React rendering techniques and how elements are going to be rendered behind the scenes, now we have to finish the timer by implementing the Reset and Capture Time, also we are going to talk about array concatenation on ES6 and React and Looping and rendering on JSX (React).

So let's finish our React Based Timer.

Resetting Timer 

Basically, Resetting is reverting back everything to default state which is, in this case, is null for hours, minutes and seconds also we clear time capture if there are any.

So start by adding the click handler then set current state to 0 and reset timer started and stopped booleans.

handleTimerReset() {
  this.setState({
    timerStarted: false,
    timerStopped: true,
    seconds: 0,
    minutes: 0,
    hours: 0,
    captures: []
  });
  clearInterval(this.timer);
}

We also need to clear the current timer interval so when we start the timer again, we won't get a counting problem.

Very Good, make sure to add the event listener on reset button click 

render() {
   ...
    <button className="btn btn-danger" onClick={this.handleTimerReset.bind(this)}>Reset!</button>
   ...
}

Now you can enter the timer and try to start it then reset it, you should everything gets cleared out for you so you can use the timer again, Awesome!

Capturing Time

Capturing a time means that when the timer is running and we have something special happened at this specific time so we can capture it and store it, in this case, this is going to be very simple in more complex example you can add the ability to add a custom message when trying to capture a time, but for now this should do the job perfectly for us.

handleTimerCapture() {
  this.setState(prevState => ({
    captures: [
      ...prevState.captures,
      this.state.hours + ":" + this.state.minutes + ":" + this.state.seconds
    ]
  }));
}

Here we are getting the previous captures array and concatenate it with a new array where we also push the new time stamp that we want to capture to the newly created array this does the same as we would use the push method under the array object, but on react it has to be done this way, so we won't loose the previously captured timestamps instead we would push the new one to the previous array and in this case we prepend 3 dots to the begenning of captures array so ES6 would now that we are concatenating two array.

Also, We need to render it to the DOM, so somewhere on the top of the timer

render() {
  ...
   <div className="timer-captures">
     { this.state.captures.map((time, index) => {
        return <code>{ "Capture " + ( index + 1 ) + " -- " + time }</code>
     })}
   </div>
  ...
}

So what we usually do is loop through the array using a for or while statement and render each timestamp, in JSX you can't use for or while to represent that instead, we use the map method under the array object which allows us to loop through each element in the array and render it (return new element) and here we are using the code block container just for styling things a bit, you can wrap this under any element container.

The map method takes a callback that gives us the current element and the index of the current iteration also, make sure to wrap this under curly braces so JSX Would know that we are using an operation instead of an HTML.

The last thing is to add the event listener under the capture button 

...
<button className="btn btn-info" onClick={this.handleTimerCapture.bind(this)}>Capture Time</button>
...

And that is it, Now our application is ready and we can use the timer.

What's Next

So as you can see we have finished the timer using React, if you have any suggestions of new tutorials, course series or advanced app examples like that let met know.

Share Tutorial

Made With By

Ipenywis Founder, Game/Web Developer, Love Play Games