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.