- 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
Toggling Edit State for Guests
8:31In 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.
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