"Android Lists and Adapters (2015)" was retired on July 11, 2018. You are now viewing the recommended replacement.
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
It's time to let users add names to the list! We're going to use the form to collect guest names. When the form submits we'll add that name to the app's state.
This video doesn't have any notes.
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
It's time to let users add
their own names to the list.
0:00
After all, what good is an RSVP
app if you can't invite guests?
0:03
So we're going to use the form at the top
of the app to collect guest names.
0:07
When the form submits,
we'll add that name to the app state.
0:11
And just as we've seen the other inputs so
far,
0:15
we'll use the app state
to hold the form state.
0:17
And we'll create handlers to allow users
to type names into the form field,
0:20
as well as submit the form and
add those names to the state.
0:25
So let's get started.
0:29
I'll start by adding a property on
the state to track the form input data.
0:30
I'll name the property pendingGuest and
set it to an empty string.
0:35
So now I'd like to challenge you to
connect the text input from the form
0:41
to this property on the state.
0:46
This won't be too different than other
tasks we've already completed together.
0:48
So go ahead, pause the video and
see if you can do it.
0:51
You can unpause when you're ready and
I'll show you how I did it.
0:54
The first thing I'll do is create
a method to handle change events.
0:57
So below toggleFilter I'll create
1:01
a new method named handleNameInput.
1:05
It accepts an event object.
1:10
And set state with the target's value.
1:13
So we'll add this.setState.
1:16
And it's going to specifically
set the pendingGuest property to
1:21
the target's value.
1:25
So inside,
we'll set pendingGuest to e.target.value.
1:27
The value property is where
an inputs value will be so
1:34
my intent here is to hook this method
up to the input's change event.
1:38
Next, I'll scroll down to
the form input on line 78.
1:42
And here I'll bind
the handler to change events.
1:48
So below the type attribute, Let's add
1:56
onChange = {this.handleNameInput}.
2:00
And I'll also connect
it to value property,
2:06
to the pendingGuest property on the state.
2:08
So I'm gonna set value here
to (this.state.pendingGuest).
2:11
Hopefully, that wasn't too tough.
2:20
It was a little different though because
we've always passed handlers through
2:22
the app tree.
2:26
This handler was connected to the same
component it was declared in.
2:27
The next challenge will have a few more
steps, but I think you're up to it.
2:31
Now I want to challenge you to add
a new guest to the list when the user
2:35
submits a name.
2:39
This will combine a number of
skills you've already learned, and
2:40
I'll give you a hint.
2:42
Don't forget to prevent the form's default
behavior when it submits in your handler
2:43
or your app will do a hard refresh.
2:48
Also, make sure new guests
go to the top of the list.
2:50
So go ahead and
pause the video, give it a try.
2:52
And if you get stumped, unpause and
I'll show you how I did it.
2:54
So I'll start by creating the method
that sets the state on submit.
2:58
I'll call it newGuestSubmitHandler.
3:03
And I'll pass it the event object.
3:12
So, first, we'll prevent
the form's default behavior by
3:17
calling preventDefault
on the event object.
3:21
And I know I need to add a new
guest to the guests array.
3:30
So I'll call set state with this.setState,
3:35
Passing in a new object
with a guest property.
3:43
And the property points to an array.
3:51
In the array,
I'll put a new object literal.
3:54
And this is going to my new guest.
3:57
So I'll set the name to
the pending guest property
4:00
on the state with this.state.pendingGuest.
4:05
And I'll set its other flags,
or booleans, to false.
4:10
So, first, isConfirmed: false,
4:14
then, isEditing: false.
4:19
Now I'll use the spread operator
with the existing guest array to
4:26
populate my new array with
the values from state.
4:31
And the form needs to clear.
4:37
So I'm going to set the pendingGuest
property to an empty string.
4:39
Finally, with my handler now created,
I'll bind it to the form submit event.
4:48
I'll scroll down to the form element and
4:54
add onSubmit =
{this.newGuestSubmitHandler}.
5:00
So as you saw there were a number
of steps to this challenge.
5:07
If you found yourself getting
a little lost, that's okay.
5:11
I would recommend going back
over the explanation and
5:14
even erasing what you had and try again.
5:17
The more you repeat these steps the better
your brain will map out what needs to
5:19
be done to program in React.
5:23
All right, so
let's test our new feature in the browser.
5:24
I'll type a new name into the form.
5:27
And when you click on the Submit button or
press Enter,
5:31
the name is added to the list, good.
5:34
So we're getting close to completion,
5:36
we just have a few more
features to implement.
5:38
In the next video, you'll create
a feature to remove guest from the app.
5:40
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