Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

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.

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>
  );
}
  • 0:00

    The stopwatch will have two main states visible to the user.

  • 0:03

    It will be either in a running state or a stop state.

  • 0:06

    The buttons on the interface should change based on the running state.

  • 0:09

    For example,

  • 0:10

    start changes to stop when we click the start to stopwatch and vice versa.

  • 0:14

    Let's build this dynamic UI first.

  • 0:16

    We'll start by initializing state in the stopwatch component.

  • 0:19

    Add a state property on the Stopwatch class.

  • 0:22

    Inside the state object,

  • 0:24

    we'll add a property named isRunning which will be a Boolean.

  • 0:28

    It will be true if the Stopwatch is running, false if not.

  • 0:32

    We'll initialize it to false.

  • 0:34

    Now we're going to do some conditional rendering in our buttons.

  • 0:37

    We need to render a start or stop button based on the value of isRunning.

  • 0:42

    You could do this a number of different ways, for

  • 0:44

    example with an if, else statement in the render method.

  • 0:47

    You can see a method of this in the teacher's notes.

  • 0:49

    I'll teach you how to write this logic in a more concise way

  • 0:52

    using the JavaScript conditional or ternary operator.

  • 0:55

    The ternary expression will read the value of isRunning and

  • 0:59

    set the button's text to stop if it's true and start if it's false.

  • 1:04

    In the start button let's replace the text with curly braces

  • 1:09

    to write a jsx expression.

  • 1:11

    Inside the curly braces type this.state.isRunning followed

  • 1:16

    by a question mark, the string stop, a colon, and the string start.

  • 1:22

    So the expression is saying if is running is true, display the text Stop,

  • 1:26

    otherwise, display the text Start.

  • 1:29

    If you're still not quite sure how ternary operators work,

  • 1:33

    be sure to watch the Treehouse videos posted in the teacher's notes.

  • 1:36

    Over in the scoreboard, we see the text start, and

  • 1:39

    that's correct because isRunning is false by default.

  • 1:42

    Next, lets add an onClick event to our start and stop button.

  • 1:46

    The onClick event will call a function named handleStopwatch,

  • 1:50

    that will start or stop the timer based on the isRunning state.

  • 1:54

    So lets pass it, this.handleStopwatch.

  • 1:59

    Now we'll write this function below the state object,

  • 2:03

    create an error function named handleStopwatch.

  • 2:11

    Inside the function,

  • 2:13

    we'll update the isRunning state with this.setState passing it an object.

  • 2:18

    And we're going to toggle the isRunning state by setting it to the opposite

  • 2:24

    of its current true or false values using the logical not operator.

  • 2:30

    So let's add the isRunning property and set its value to not this.state.isRunning.

  • 2:39

    All right, let's have a look at our stopwatch in the browser.

  • 2:41

    If I click Start, the button changes to Stop, and clicking Stop changes it back.

  • 2:48

    You can also see the isRunning state changing from true to false or

  • 2:52

    false to true in React Dev tools when you select the stopwatch component.

  • 2:57

    Great, our stopwatch is taking shape.

  • 2:59

    Next we'll need to make the timer actually tick in seconds and

  • 3:03

    create the event handler for the reset button.

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

Sign up