Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In the last video, we allowed the user to toggle a guest between "confirmed" and "unconfirmed". In this video, we're going to implement a slightly more complicated version of that feature. Instead checking a box on and off, we're going to let users toggle between an editing and a saved view.
Note
You may have noticed at the 4:19 mark that Guil types handeToggleEditing, leaving off the "l" in "handle". Typos like this can easily happen when you are writing your code, but as long as you are consistent they won't necessarily lead to errors. Thanks to auto-complete, Guil also uses handeToggleEditing at the 5:15 mark when updating the Guest.js component. Because he used the same name in both places, the code works as expected.
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
In the last video,
0:00
we allowed the user to toggle a guest
between Confirmed and unconfirmed.
0:01
In this video,
0:06
we're going to implement a slightly more
complicated version of that feature.
0:07
Instead of checking a box on and off,
0:11
we're going to let users toggle
between an editing and a saved view.
0:13
For example, when users click to edit
a name, they'll see a text input.
0:18
And when they click save,
they'll again see a span element.
0:22
We'll use a Boolean in the state to track
these changes, just as we did before.
0:25
We'll call the Boolean isEditing.
0:29
When true,
the user will see the text input.
0:32
And when false,
they'll see the span element.
0:34
So I'll go ahead and
add that to the state here in App.js.
0:37
And because isEditing
is done to each guest,
0:42
I'll add isEditing to each one and
set it to false.
0:46
And for the last one, I'll set it to true.
0:52
Now let's write a handler to turn this
feature on and off, just like we did for
1:00
the checkbox.
1:05
In fact, it's going to be so similar
that I could just copy this method and
1:06
paste it below.
1:09
And all I'd need to change would
be the name of the method and
1:10
change the isConfirmed
property to isEditing.
1:15
But if you are copying code, that's a red
flag that you might be able to do better.
1:18
So can to you think of a way to modify
this function to make it usable for
1:23
either of the isConfirm or
isEditing properties?
1:27
Go ahead and pause the video if you'd
like to try to figure it out on your own.
1:30
So we need to be able to configure
the property to isConfirmed or isEditing.
1:34
So let's add a parameter to
hold either of these values.
1:40
I'll call it property.
1:45
And to use the new property parameter,
1:50
there are a number of ways
to set it on our new state.
1:52
And none of them are wrong.
1:55
For this,
I'm going to use a computed property name.
1:57
So instead of .isConfirmed,
I'll put property inside square brackets.
2:00
And I'll use a similar approach to read
the property from the guests object.
2:08
So I'll replace isConfirmed with
property inside square brackets.
2:12
And I'll change the name of
the method to be more general,
2:17
like toggleGuestPropertyAt.
2:22
There's one more thing we can do.
2:27
We can now write short methods
that call this method with
2:29
the property we wanna use.
2:33
So right underneath,
I'll write a method with the same
2:35
name we had before, toggleConfirmationAt.
2:39
It will accept an index.
2:44
And it's going to call
toggleGuestPropertyAt.
2:49
So we'll write this.toggleGuestPropertyAt,
2:52
passing in isConfirmed and the index.
2:56
And now we won't need to change
anything else about the app.
3:05
And we have a function we can use,
if we need to flip any other Booleans.
3:08
So I'll just copy this function,
3:13
paste it below, and
create one for isEditing.
3:16
I'll change the name to toggleEditingAt.
3:25
And we'll change isConfirmed to isEditing.
3:31
Now let's scroll down and
pass this down to the GuestList.
3:37
I'll give it a new prop
called toggleEditingAt,
3:45
passing in this.toggleEditingAt.
3:50
Now open up the GuestList component.
3:56
And I'll copy and paste the propType for
toggleConfirmationAt.
3:59
And paste it below,
changing it to toggleEditingAt
4:05
I'll pass it into the Guest
component in a similar way, as well.
4:13
So I'll add a new prop
of handleToggleEditing.
4:17
And pass it function that returns
4:25
props.toggleEditingAt, Passing
it the index.
4:30
And while I'm here,
I'll pass the isEditing prop in, as well.
4:39
So I'll pass this one, guest.isEditing,
4:46
next I'll open up Guest.js.
4:51
And first, I'll add the handler and
isEditing to propTypes.
4:55
So first, right below isConfirmed,
5:00
say isEditing: PropTypes.bool.isRequired.
5:05
And at the bottom,
I'll say handleToggleEditing:
5:13
PropTypes.func.isRequired.
5:18
And up in the function,
5:25
we'll bind the handler to click
events on the edit button.
5:27
So inside the edit button's opening tag,
we'll add onClick,
5:30
passing it props.handleToggleEditing.
5:37
If I say this and switch over
to the browser, you can see here
5:41
in dev tools that clicking
the edit button is toggling state.
5:46
Good, so now all we need to do is
connect that state to the span element
5:52
holding the name.
5:56
This is actually a great opportunity to
pull the name into its own component.
5:58
In Guest.js, I'll replace this span
tag with a custom name, GuestName.
6:02
And I'll pass in the isEditing prop
with isEditing={props.isEditing}.
6:10
Props.name is a child of
this new component, so
6:19
it will be available in
the component from props.children.
6:23
So now I'll import GuestName at the top
6:27
with import GuestName from './GuestName'.
6:32
And now let's create GuestName.
6:39
So what I'll do is I'll save Guest
as a new file called GuestName.js.
6:41
And in this new file,
I'll cut out the import,
6:49
the jsx, And
all the prop types except isEditing.
6:55
And I'll change the name of
the component to GuestName.
7:05
So now if isEditing is true,
I want to return a text input.
7:12
Otherwise, I'll return a span, so
I'll do that with an if statement.
7:18
In the function,
we'll say if props.isEditing.
7:24
Return an input, so
in the return statement,
7:33
we'll add an input with a type of text and
a value prop.
7:40
Otherwise, we're going to
return a span element.
7:50
So inside this return,
we'll add a set of span tags.
7:54
Now I'll pass prop.children
into the value of the input.
8:01
And I'll nest it in the span tag, as well.
8:09
Let's try much out in the browser.
8:19
Clicking the edit button,
we see that it works!
8:21
But we still need to provide the input
with a handler to change the name and
8:25
the state.
8:29
We'll do that in the next video.
8:29
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