- Building the GuestList Component 6:12
- Writing a Handler to Confirm Guests 7:46
- Connecting the Confirm Guests Handler 4:27
- Creating Components Review 6 questions
- Toggling Edit State for Guests 8:31
- Changing Guest Name in State 6:11
- Filtering Guests 6:06
- Filtering and Changing State Review 5 questions
- Adding Guests to the List 5:44
- Removing Names From the List 3:42
- Pending Name Submission Feature 4:21
- Creating the Counter 7:14
- Building the Application Review 5 questions
Preview
Video Player
00:00
00:00
Creating the Counter
7:14For the last feature of this app, let's make the counter update as the state of the app changes.
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