Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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 (ternary) Operator
- Conditional Rendering – React docs
- Inline If-Else with Conditional Operator
- Ternary Operator – Treehouse workshop
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.
Sign up