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
For the last feature of this app, let's make the counter update as the state of the app changes.
Resources
For the last feature of this app,
0:00
let's make the counter component
update as the state of the app change.
0:02
The first step I wanna take is
to create a counter component,
0:06
which will return this table.
0:10
So I'll create a new file and
call it counter.js,
0:12
At the top I'll import
React from 'react' and
0:19
import PropTypes from 'prop-types',
0:26
Then I'll declare a simple counter
function, const Counter pass it props.
0:36
And I'll export Counter at the bottom.
0:46
I'll save that and switch back to App.js.
0:53
Up top, I'll import the Counter component.
0:58
Import Counter from Counter.
1:04
And then I'll scroll down and
cut out the table.
1:12
And replace it with a counter component.
1:19
Over in counter.js I'll paste
the table inside a new function.
1:25
And now we can replace each of these
numerals with corresponding prop values.
1:35
So I'll change the first one
to props.numberAttending.
1:41
I'll go ahead and copy this, and change
the second one to props.numberUnconfirmed.
1:54
And lastly,
I'll make the third one props.totalInvited
2:05
And to finish this component I'll
declare it's propTypes at the bottom.
2:14
We'll say Counter.propTypes, = object.
2:19
First we'll say numberAttending
should be a number.
2:30
So we'll say PropTypes.number, and
2:36
we'll make this optional
by not adding isRequired.
2:40
Next, numberUnconfirmed.
2:47
And finally, totalInvited.
2:53
Over in app.js, let's start passing
those totals into the counter.
2:59
As you recall we already wrote
the function that totals all the invited
3:04
guests, getTotalInvited.
3:08
So at the top of the render method,
I'll call getTotalInvited,
3:10
And assign it to a constant
named totalInvited.
3:17
Then I'll scroll down and
3:24
pass it to the counter component
via the totalIvited prop.
3:26
If I save this and look in the browser,
3:35
you can see the total is now getting
updated when I remove names for example.
3:37
So I'm calling getTotalInvited
in the render method because
3:42
I want the count to update whenever
the app component re-renders.
3:47
So now to get the attending guess total
I'll need to count the number of guests
3:53
that are confirmed.
3:57
And I can do this using
the reduce array method.
3:58
Reduce can be useful for
4:01
when you want to end up with
some value other than an array.
4:03
In this case we want a single number.
4:06
So I'll go up to the getAttendingGuests
method we defined earlier and
4:09
un-comment it.
4:15
And here,
4:18
I'll return the result of calling
reduce on the guest array and state.
4:19
We'll say this.state
.guests .reduce.reduce,
4:25
And reduce takes an accumulator and
the current value.
4:35
So for the accumulator, I want a total and
4:40
the current value will be a guest and
I'll initialize total to be 0.
4:44
For each guest I want to check
if isConfirmed is true and
4:53
add 1 to the total if so.
4:58
Otherwise I want to return
the total unchanged, and
5:00
I can do this with a ternary expression.
5:03
So if guest.isConfirmed is true,
5:10
add one to the total + 1,
5:15
otherwise return the total unchanged.
5:19
And I'm going to delete this
getUnconfirmedGuests method and
5:28
I'll show you why in just a moment.
5:32
So next in the render method I'll create
a constant, Called numberAttending,
5:34
and I'll set it equal to the output
of the getAttendingGuests method.
5:42
So now, notice that, to get the total
number of unconfirmed guests,
5:50
I just need to subtract the number
attending from the total.
5:55
So I'll create the constant
numberUnconfirmed,
5:59
and assign it to totalInvited-
numberAttending.
6:04
And finally we'll pass
those into the counter.
6:13
First numberAttending = numberAttending,
6:18
and numberUnconfirmed = numberUnconfirmed.
6:22
All right saving that, and
previewing in the browser.
6:30
You can see that the counter now works.
6:35
And if I check and
uncheck confirmed boxes for example,
6:40
you can see the totals are changing
to the correct values.
6:44
And if I remove a guest
the total decreases by one.
6:48
Great work, we have a fully
functioning RSVP app built in React.
7:01
We can still improve on
the code we wrote thought.
7:05
So in the next stage we'll look at the
steps we can take to make this app more
7:07
concise and maintainable, see you there.
7:11
You need to sign up for Treehouse in order to download course files.
Sign up