Stopwatch State

3:06 with Guil Hernandez

The stopwatch will have two main states visible to the user. It will be either in a running state, or a stopped state. The buttons on the interface should change based on the running state. We'll start by initializing state in the Stopwatch component.

Teacher's Notes
Video Transcript
Downloads

Resources

Conditional rendering with if...else:

render() {
  let button;
  if (this.state.isRunning) {
    button = <button>Stop</button>;
  } else {
    button = <button>Start</button>;
  }

  return (
    <div className="stopwatch">
      <h2>Stopwatch</h2>
      <span className="stopwatch-time">...</span>
      { button }
      <button onClick={this.handleReset}>Reset</button>
    </div>
  );
}

The stopwatch will have two main states visible to the user. 0:00 It will be either in a running state or a stop state. 0:03 The buttons on the interface should change based on the running state. 0:06 For example, 0:09 start changes to stop when we click the start to stopwatch and vice versa. 0:10 Let's build this dynamic UI first. 0:14 We'll start by initializing state in the stopwatch component. 0:16 Add a state property on the Stopwatch class. 0:19 Inside the state object, 0:22 we'll add a property named isRunning which will be a Boolean. 0:24 It will be true if the Stopwatch is running, false if not. 0:28 We'll initialize it to false. 0:32 Now we're going to do some conditional rendering in our buttons. 0:34 We need to render a start or stop button based on the value of isRunning. 0:37 You could do this a number of different ways, for 0:42 example with an if, else statement in the render method. 0:44 You can see a method of this in the teacher's notes. 0:47 I'll teach you how to write this logic in a more concise way 0:49 using the JavaScript conditional or ternary operator. 0:52 The ternary expression will read the value of isRunning and 0:55 set the button's text to stop if it's true and start if it's false. 0:59 In the start button let's replace the text with curly braces 1:04 to write a jsx expression. 1:09 Inside the curly braces type this.state.isRunning followed 1:11 by a question mark, the string stop, a colon, and the string start. 1:16 So the expression is saying if is running is true, display the text Stop, 1:22 otherwise, display the text Start. 1:26 If you're still not quite sure how ternary operators work, 1:29 be sure to watch the Treehouse videos posted in the teacher's notes. 1:33 Over in the scoreboard, we see the text start, and 1:36 that's correct because isRunning is false by default. 1:39 Next, lets add an onClick event to our start and stop button. 1:42 The onClick event will call a function named handleStopwatch, 1:46 that will start or stop the timer based on the isRunning state. 1:50 So lets pass it, this.handleStopwatch. 1:54 Now we'll write this function below the state object, 1:59 create an error function named handleStopwatch. 2:03 Inside the function, 2:11 we'll update the isRunning state with this.setState passing it an object. 2:13 And we're going to toggle the isRunning state by setting it to the opposite 2:18 of its current true or false values using the logical not operator. 2:24 So let's add the isRunning property and set its value to not this.state.isRunning. 2:30 All right, let's have a look at our stopwatch in the browser. 2:39 If I click Start, the button changes to Stop, and clicking Stop changes it back. 2:41 You can also see the isRunning state changing from true to false or 2:48 false to true in React Dev tools when you select the stopwatch component. 2:52 Great, our stopwatch is taking shape. 2:57 Next we'll need to make the timer actually tick in seconds and 2:59 create the event handler for the reset button. 3:03

You need to sign up for Treehouse in order to download course files.

React Components

Stopwatch State

Resources