Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Components

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Stopwatch State

3:45 with Laura Coronel

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:

let button;
if (isRunning) {
  button = <button onClick={() => setIsRunning(false)}>Stop</button>;
} else {
  button = <button onClick={() => setIsRunning(true)}>Start</button>;
}

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

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    The stopwatch will have two main states visible to the user. 0:00
    It will either be in a running state or a stopped state. 0:03
    The buttons on the interface should change based on the running state. 0:08
    For example, start changes to stop when we click to start the stopwatch, 0:13
    and vice versa. 0:19
    Let's build this dynamic UI first. 0:20
    We'll start by initializing state in the stopwatch component by 0:25
    declaring the useState hook. 0:30
    Our state will be called isRunning, and 0:32
    the function to update it to setIsRunning. 0:36
    The state is running will be a Boolean. 0:40
    It will be true if the stopwatch is running, and false if not. 0:43
    We'll initialize it to false. 0:49
    Now we're gonna do some conditional rendering in our buttons. 0:51
    We need to render a start or stop button based on the value of isRunning. 0:59
    You could do this a number of different ways. 1:05
    For example, with an if else statement outside of the return statement. 1:08
    You can see an example of this in the teacher's notes below. 1:13
    I'll teach you how to write this logic in a more concise way using 1:18
    the JavaScript conditional or ternary operator. 1:22
    The ternary expression will read the value of isRunning and 1:26
    set the buttons text to stop if it's true, and start, if it's false. 1:30
    In the Start button, 1:38
    I'll replace the text with curly braces to write the JSX expression. 1:39
    Inside the curly braces, type isRunning? 1:45
    "Stop" : "Start". 1:52
    The expression is saying, if isRunning is true, display the text stop. 1:59
    Otherwise, display the text Start. 2:06
    If you're still not quite sure how ternary operators work, 2:11
    be sure to watch the Treehouse videos posted in the teacher's notes below. 2:14
    We see the start text, that's correct, because isRunning is false by default. 2:20
    Next, let's add an onClick event to our start stop button. 2:28
    The onClick event will call the function setIsRunning, 2:34
    which we received from the use state hook. 2:37
    We want to update the isRunning state based on the previous state. 2:41
    If is running is true, set it to false. 2:46
    And if is running is false, set it to true. 2:49
    So let's pass setIsRunning, an arrow function, with the parameter prevValue. 2:53
    We'll toggle the isRunning state by setting it to the opposite of 3:01
    its current true false value using the logical NOT operator, 3:06
    Let's save our changes and have a look at our stopwatch in the browser. 3:14
    If we click start, the button changes to stop, and clicking stop changes it back. 3:19
    You can also see the isRunning state changing from false to true or 3:26
    true to false in React dev tools when you select the stopwatch component. 3:30
    Great our stopwatch is taking shape. 3:36
    Next, we'll need to make the timer actually tick in seconds and 3:38
    implement the reset button. 3:42

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

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up