1
00:00:00,512 --> 00:00:01,840
In the last video,

2
00:00:01,840 --> 00:00:06,987
we allowed the user to toggle a guest
between Confirmed and unconfirmed.

3
00:00:06,987 --> 00:00:07,689
In this video,

4
00:00:07,689 --> 00:00:11,362
we're going to implement a slightly more
complicated version of that feature.

5
00:00:11,362 --> 00:00:13,718
Instead of checking a box on and off,

6
00:00:13,718 --> 00:00:18,136
we're going to let users toggle
between an editing and a saved view.

7
00:00:18,136 --> 00:00:22,728
For example, when users click to edit
a name, they'll see a text input.

8
00:00:22,728 --> 00:00:25,719
And when they click save,
they'll again see a span element.

9
00:00:25,719 --> 00:00:29,841
We'll use a Boolean in the state to track
these changes, just as we did before.

10
00:00:29,841 --> 00:00:32,749
We'll call the Boolean isEditing.

11
00:00:32,749 --> 00:00:34,894
When true,
the user will see the text input.

12
00:00:34,894 --> 00:00:37,139
And when false,
they'll see the span element.

13
00:00:37,139 --> 00:00:40,840
So I'll go ahead and
add that to the state here in App.js.

14
00:00:42,737 --> 00:00:46,709
And because isEditing
is done to each guest,

15
00:00:46,709 --> 00:00:51,212
I'll add isEditing to each one and
set it to false.

16
00:00:52,664 --> 00:00:56,774
And for the last one, I'll set it to true.

17
00:01:00,843 --> 00:01:05,198
Now let's write a handler to turn this
feature on and off, just like we did for

18
00:01:05,198 --> 00:01:06,072
the checkbox.

19
00:01:06,072 --> 00:01:09,854
In fact, it's going to be so similar
that I could just copy this method and

20
00:01:09,854 --> 00:01:10,708
paste it below.

21
00:01:10,708 --> 00:01:15,210
And all I'd need to change would
be the name of the method and

22
00:01:15,210 --> 00:01:18,916
change the isConfirmed
property to isEditing.

23
00:01:18,916 --> 00:01:23,490
But if you are copying code, that's a red
flag that you might be able to do better.

24
00:01:23,490 --> 00:01:27,615
So can to you think of a way to modify
this function to make it usable for

25
00:01:27,615 --> 00:01:30,687
either of the isConfirm or
isEditing properties?

26
00:01:30,687 --> 00:01:34,522
Go ahead and pause the video if you'd
like to try to figure it out on your own.

27
00:01:34,522 --> 00:01:40,906
So we need to be able to configure
the property to isConfirmed or isEditing.

28
00:01:40,906 --> 00:01:45,608
So let's add a parameter to
hold either of these values.

29
00:01:45,608 --> 00:01:47,119
I'll call it property.

30
00:01:50,567 --> 00:01:52,814
And to use the new property parameter,

31
00:01:52,814 --> 00:01:55,752
there are a number of ways
to set it on our new state.

32
00:01:55,752 --> 00:01:57,231
And none of them are wrong.

33
00:01:57,231 --> 00:02:00,613
For this,
I'm going to use a computed property name.

34
00:02:00,613 --> 00:02:06,080
So instead of .isConfirmed,
I'll put property inside square brackets.

35
00:02:08,019 --> 00:02:12,766
And I'll use a similar approach to read
the property from the guests object.

36
00:02:12,766 --> 00:02:17,095
So I'll replace isConfirmed with
property inside square brackets.

37
00:02:17,095 --> 00:02:22,338
And I'll change the name of
the method to be more general,

38
00:02:22,338 --> 00:02:25,231
like toggleGuestPropertyAt.

39
00:02:27,225 --> 00:02:29,133
There's one more thing we can do.

40
00:02:29,133 --> 00:02:33,102
We can now write short methods
that call this method with

41
00:02:33,102 --> 00:02:35,051
the property we wanna use.

42
00:02:35,051 --> 00:02:39,922
So right underneath,
I'll write a method with the same

43
00:02:39,922 --> 00:02:44,248
name we had before, toggleConfirmationAt.

44
00:02:44,248 --> 00:02:47,105
It will accept an index.

45
00:02:49,023 --> 00:02:52,023
And it's going to call
toggleGuestPropertyAt.

46
00:02:52,023 --> 00:02:56,772
So we'll write this.toggleGuestPropertyAt,

47
00:02:56,772 --> 00:03:00,508
passing in isConfirmed and the index.

48
00:03:05,448 --> 00:03:08,254
And now we won't need to change
anything else about the app.

49
00:03:08,254 --> 00:03:13,587
And we have a function we can use,
if we need to flip any other Booleans.

50
00:03:13,587 --> 00:03:16,966
So I'll just copy this function,

51
00:03:16,966 --> 00:03:21,633
paste it below, and
create one for isEditing.

52
00:03:25,624 --> 00:03:29,131
I'll change the name to toggleEditingAt.

53
00:03:31,816 --> 00:03:35,258
And we'll change isConfirmed to isEditing.

54
00:03:37,799 --> 00:03:43,447
Now let's scroll down and
pass this down to the GuestList.

55
00:03:45,164 --> 00:03:50,469
I'll give it a new prop
called toggleEditingAt,

56
00:03:50,469 --> 00:03:54,521
passing in this.toggleEditingAt.

57
00:03:56,377 --> 00:03:59,550
Now open up the GuestList component.

58
00:03:59,550 --> 00:04:05,280
And I'll copy and paste the propType for
toggleConfirmationAt.

59
00:04:05,280 --> 00:04:10,338
And paste it below,
changing it to toggleEditingAt

60
00:04:13,327 --> 00:04:17,821
I'll pass it into the Guest
component in a similar way, as well.

61
00:04:17,821 --> 00:04:22,725
So I'll add a new prop
of handleToggleEditing.

62
00:04:25,627 --> 00:04:30,183
And pass it function that returns

63
00:04:30,183 --> 00:04:37,405
props.toggleEditingAt, Passing
it the index.

64
00:04:39,162 --> 00:04:45,567
And while I'm here,
I'll pass the isEditing prop in, as well.

65
00:04:46,914 --> 00:04:51,818
So I'll pass this one, guest.isEditing,

66
00:04:51,818 --> 00:04:55,179
next I'll open up Guest.js.

67
00:04:55,179 --> 00:05:00,365
And first, I'll add the handler and
isEditing to propTypes.

68
00:05:00,365 --> 00:05:05,280
So first, right below isConfirmed,

69
00:05:05,280 --> 00:05:11,891
say isEditing: PropTypes.bool.isRequired.

70
00:05:13,564 --> 00:05:18,897
And at the bottom,
I'll say handleToggleEditing:

71
00:05:18,897 --> 00:05:22,341
PropTypes.func.isRequired.

72
00:05:25,610 --> 00:05:27,102
And up in the function,

73
00:05:27,102 --> 00:05:30,838
we'll bind the handler to click
events on the edit button.

74
00:05:30,838 --> 00:05:37,161
So inside the edit button's opening tag,
we'll add onClick,

75
00:05:37,161 --> 00:05:41,505
passing it props.handleToggleEditing.

76
00:05:41,505 --> 00:05:46,690
If I say this and switch over
to the browser, you can see here

77
00:05:46,690 --> 00:05:52,100
in dev tools that clicking
the edit button is toggling state.

78
00:05:52,100 --> 00:05:56,871
Good, so now all we need to do is
connect that state to the span element

79
00:05:56,871 --> 00:05:58,202
holding the name.

80
00:05:58,202 --> 00:06:02,362
This is actually a great opportunity to
pull the name into its own component.

81
00:06:02,362 --> 00:06:10,057
In Guest.js, I'll replace this span
tag with a custom name, GuestName.

82
00:06:10,057 --> 00:06:17,595
And I'll pass in the isEditing prop
with isEditing={props.isEditing}.

83
00:06:19,801 --> 00:06:23,314
Props.name is a child of
this new component, so

84
00:06:23,314 --> 00:06:27,781
it will be available in
the component from props.children.

85
00:06:27,781 --> 00:06:32,851
So now I'll import GuestName at the top

86
00:06:32,851 --> 00:06:39,306
with import GuestName from './GuestName'.

87
00:06:39,306 --> 00:06:41,563
And now let's create GuestName.

88
00:06:41,563 --> 00:06:49,358
So what I'll do is I'll save Guest
as a new file called GuestName.js.

89
00:06:49,358 --> 00:06:55,626
And in this new file,
I'll cut out the import,

90
00:06:55,626 --> 00:07:02,617
the jsx, And
all the prop types except isEditing.

91
00:07:05,564 --> 00:07:09,169
And I'll change the name of
the component to GuestName.

92
00:07:12,577 --> 00:07:18,860
So now if isEditing is true,
I want to return a text input.

93
00:07:18,860 --> 00:07:24,180
Otherwise, I'll return a span, so
I'll do that with an if statement.

94
00:07:24,180 --> 00:07:29,158
In the function,
we'll say if props.isEditing.

95
00:07:33,561 --> 00:07:40,255
Return an input, so
in the return statement,

96
00:07:40,255 --> 00:07:48,163
we'll add an input with a type of text and
a value prop.

97
00:07:50,665 --> 00:07:54,615
Otherwise, we're going to
return a span element.

98
00:07:54,615 --> 00:07:59,332
So inside this return,
we'll add a set of span tags.

99
00:08:01,235 --> 00:08:09,528
Now I'll pass prop.children
into the value of the input.

100
00:08:09,528 --> 00:08:12,303
And I'll nest it in the span tag, as well.

101
00:08:19,449 --> 00:08:21,680
Let's try much out in the browser.

102
00:08:21,680 --> 00:08:25,774
Clicking the edit button,
we see that it works!

103
00:08:25,774 --> 00:08:29,227
But we still need to provide the input
with a handler to change the name and

104
00:08:29,227 --> 00:08:29,802
the state.

105
00:08:29,802 --> 00:08:31,454
We'll do that in the next video.