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