"WordPress Hooks - Actions and Filters" was retired on July 6, 2019.
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 still need to provide the input with a handler to change a guest name in the state. We've created handlers starting at the top of the component tree. In this video, we'll start at the bottom and work our way up.
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
In this video,
we'll provide the input a handler,
0:00
to change a guest name in the state.
0:02
So far, we've created a couple of handlers
starting at the top of the component
0:04
tree in App.js so now let's start
at the bottom and work our way up.
0:10
I'll go back to GuestName and
enter a change handler in the input.
0:14
So below the value prop I'll add
onChagne = props.handleNameEdits.
0:20
I'll also add it to the propTypes
to make sure it's a function,
0:30
when it's passed in through props.
0:34
So I'll type handleNameEdits,
PropTypes.func.isRequired.
0:36
Now let's go up the tree to
the Guest component where we'll pass
0:45
this new handler into GuestName.
0:50
We call the prop handle name edits So
0:53
here in the opening GuestName
tag we'll say handleNameEdits.
0:56
And this is going to hold a function
that so fired in the onChange event.
1:03
So it will receive an event object.
1:07
And we'll need the event object to
get the value from the text input.
1:11
So I'll call the function setName,
props.setName,
1:17
because it's going to accept the new
text and set the name in the state.
1:21
And I'll pass it e.target.value.
1:26
Now let's add setName to the PropTypes.
1:32
SetName.
1:39
PropTypes.func.
1:43
And this is also going to be required.
1:46
Now we'll trace the tree up to
the next component, GuestList.
1:50
We'll pass the guest component
the function it expects so
1:55
add setName = {text as a parameter and
2:03
it's going to return props.setNameAt(text,
index}.
2:08
So to recap what the function does,
this function accepts the new name and
2:17
sets that guest's state.
2:22
We need the index to find
the right name to change.
2:24
So in the body of setName,
2:28
I call the function on props that
takes an index and the text.
2:30
And I called the function setNameAt
to signify it once an index.
2:35
Now I could also called it setName,
but adding At to the name
2:40
also helps differentiate this function
from the other one called setName.
2:44
Next I'll put setName map into
the PropTypes for guest list.
2:48
And now let's go one more step up
the tree to the top of the app.
3:01
So here, in app.js, we're going to write
setnameat as a method on this component.
3:06
But first, I'll send it down to GuestList,
3:12
now that GuestList is
expecting the function.
3:16
So I'll add a prop called setNameAt,
3:19
and pass it this.setNameAt.
3:24
And now let's finally write that function.
3:31
So the new setNameAt function is
going to be really similar to our
3:35
toggleGuestPropertyAt function
because both functions have to
3:39
look through the guest object for
the right property to change.
3:43
In fact, this function is so
similar let's copy it and paste it below.
3:48
Now a red flag should have
just popped up for you.
3:56
Because earlier,
I said that when you copy code like this,
4:00
that might indicate that you could
refactor it to make it reusable.
4:03
Well, that might also be true here but
in this case,
4:07
the two actions are fairly different.
4:09
While one flips a Boolean value,
4:11
the other takes a string value and
sets it on the state.
4:13
Now that's not to say some of the two
handlers can't be re-written to share some
4:18
of their functionality, but I'll leave
it up to you to try it on your own.
4:22
So I'll change the function
name to setNameAt.
4:26
And it will take a name
instead of a property and
4:33
because name is also
the property name I can
4:37
define the key value pairs
with the shortcut name.
4:41
And we're all set, so let's switch to the
browser and I'll change this name to Sam.
4:50
And it works I could even
check the sate and dev tools.
4:59
So now it says name, Sam.
5:02
Now there's one more small issue.
5:05
When I click this edit button,
5:07
how would the user know that clicking
it again will change to a saved state?
5:09
It would be better if this button would
change to say Save when we enter this
5:14
editing state and then change back
to edit when we're in a saved state.
5:19
So why don't you give that a try?
5:24
Go ahead and pause the video,
and see if you can do it.
5:26
This is just a presentational issue the
functionality of the app works the way we
5:29
want it to.
5:33
We just want to change the display
based on the value of isEditing.
5:34
In Guest.js, I'll use a ternary expression
to read the value of isEditing and
5:39
evaluate to save if it's true and
edit if not.
5:48
If we check the browser now, we can see
the name of the button changes from edit
5:53
to save, And then back to edit, good.
5:59
In the next video, we'll let the user turn
on a filter to only see confirmed guests.
6:05
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