Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React by Example!
You have completed React by Example!
Preview
We're ready to start building the RSVP app. In this video, we'll take the first step by building a GuestList component.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up