- 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
Building the GuestList Component
6:12We're ready to start building the RSVP app. In this video, we'll take the first step by building a GuestList component.
[MUSIC]
0:00
In the last video,
we got our app set up and
0:04
ready to start building out the RSVP app.
0:07
Now, we'll take the first step by
building a guest list component.
0:09
If you look at the guests
in our app component,
0:13
they are represented by
unordered list items.
0:16
So we're going to cut this unordered list
out and paste it into a new component.
0:19
First, I'll create a new file in the
source directory and call it GuesList.js.
0:24
I'll need to import React at the top.
0:31
Then I'll create a constant
named GuestList and
0:37
assign an arrow function to it.
0:41
The arrow function will
take one parameter, props.
0:44
Under the arrow function,
I'll export GuestList.
0:48
So now I have a basic skeleton for
a stateless React component.
0:55
It's not returning anything yet,
so I'll fix that next.
0:59
Switch back to App.js and
cut the unordered list.
1:02
And while I'm here, I'll put
the GuestList component in its place.
1:09
I'll import it as well so
1:18
it will be connected once I
fixed the GuestList component.
1:19
So I'll go to the top.
1:22
And type import GuestList
from ./GuestList.
1:25
I'll save this file.
1:33
And switching over to the GuestList file,
1:34
I'll select these curly braces and
paste over them.
1:38
When I save this and
switch over to the browser,
1:49
I see that nothing has changed,
which is what I expected to see.
1:53
So now, let's bring in the app state.
1:57
And replace the static guests with the two
guests in state, Treasurer and Nic.
2:00
Before we do, though,
let's install the prop types package so
2:05
we can validate the props
we're about to pass in.
2:09
So I'll go over to my terminal and
2:11
stop the development server,
2:15
then run npm install -- save, prop-types.
2:19
And when that's done, I'll type npm
start to start the development server.
2:25
Now, I'll go back to
the GuestList component in my
2:31
text editor and
import prop types at the top
2:37
with import PropTypes from prop-types.
2:42
We know we want to bring in guests from
the App state and that guests is an array,
2:47
so we can set that up at the bottom,
after GuestList has been declared.
2:53
So just above the export statement,
we'll say GuestList.propTypes,
3:00
Equals the object and inside, We'll say
3:09
guests: and set that to PropTypes.array.
3:14
And we want it to be required,
so we will add .isRequired.
3:23
Now, we'll need to map over the guest
array to render each one as a list item,
3:28
which will appear as a guest tile.
3:33
So I'll remove all but
one of the list items inside the <ul>
3:35
which I can use as a guide,
then I'll surround it with { }.
3:40
Starting inside the {},
I'll type props.guests.map,
3:46
and I'll pass it guest and index.
3:53
If I save this now, I'll get an error,
4:03
because I haven't passed the guests
array into this component as a prop yet.
4:06
So I'll switch over to App.js and
4:11
pass GuestList a guests prop.
4:16
And I'll pass it the value
this.state.guests.
4:20
So now, in the browser,
we have two components.
4:26
But they have the same name.
4:29
Well, that's good because they
are two guests we put into the store.
4:31
We haven't put their names in yet though.
4:34
So before we fix that let's look
at the errors in the console.
4:36
And the first one is the error,
we know will be fixed later.
4:41
But the second is telling us we need
to have a key property whenever we
4:45
iterate like we're doing with map.
4:49
So back in Guestlist.js,
I'll add a key property to the li,
4:52
And pass the array index as the number
that's unique to each item.
5:00
And instead of this hardcoded name,
5:05
I'll display the names
dynamically with guest.name.
5:09
We also want to connect the isConfirmed
boolean up to the check boxes.
5:14
We can do that with the checked
property on that input.
5:19
So I'll pass the input
checked property and
5:22
pass it guest.isConfirmed.
5:27
So now,
5:33
when we look in the browser you can see
that our guests are rendering correctly.
5:33
We have Treasure in Nic.
5:38
Let's add one more guest to see a change,
so I'll go to App.js,
5:40
scroll back up to this state and
I'll copy and
5:46
paste one of these and
add it to the end of the array.
5:50
I'll change the name to let's say Matt K.
5:57
Looking in the browser,
there's the extra guest, good.
6:02
So in the next video,
6:07
let's add the ability to edit
these names with the edit button.
6:08