1 00:00:00,000 --> 00:00:03,183 It's time to let users add their own names to the list. 2 00:00:03,183 --> 00:00:07,146 After all, what good is an RSVP app if you can't invite guests? 3 00:00:07,146 --> 00:00:11,611 So we're going to use the form at the top of the app to collect guest names. 4 00:00:11,611 --> 00:00:15,089 When the form submits, we'll add that name to the app state. 5 00:00:15,089 --> 00:00:17,974 And just as we've seen the other inputs so far, 6 00:00:17,974 --> 00:00:20,870 we'll use the app state to hold the form state. 7 00:00:20,870 --> 00:00:25,562 And we'll create handlers to allow users to type names into the form field, 8 00:00:25,562 --> 00:00:29,171 as well as submit the form and add those names to the state. 9 00:00:29,171 --> 00:00:30,959 So let's get started. 10 00:00:30,959 --> 00:00:35,193 I'll start by adding a property on the state to track the form input data. 11 00:00:35,193 --> 00:00:41,272 I'll name the property pendingGuest and set it to an empty string. 12 00:00:41,272 --> 00:00:46,257 So now I'd like to challenge you to connect the text input from the form 13 00:00:46,257 --> 00:00:48,468 to this property on the state. 14 00:00:48,468 --> 00:00:51,739 This won't be too different than other tasks we've already completed together. 15 00:00:51,739 --> 00:00:54,227 So go ahead, pause the video and see if you can do it. 16 00:00:54,227 --> 00:00:57,167 You can unpause when you're ready and I'll show you how I did it. 17 00:00:57,167 --> 00:01:01,534 The first thing I'll do is create a method to handle change events. 18 00:01:01,534 --> 00:01:05,961 So below toggleFilter I'll create 19 00:01:05,961 --> 00:01:10,686 a new method named handleNameInput. 20 00:01:10,686 --> 00:01:13,489 It accepts an event object. 21 00:01:13,489 --> 00:01:16,634 And set state with the target's value. 22 00:01:16,634 --> 00:01:19,808 So we'll add this.setState. 23 00:01:21,278 --> 00:01:25,571 And it's going to specifically set the pendingGuest property to 24 00:01:25,571 --> 00:01:27,062 the target's value. 25 00:01:27,062 --> 00:01:33,061 So inside, we'll set pendingGuest to e.target.value. 26 00:01:34,344 --> 00:01:38,063 The value property is where an inputs value will be so 27 00:01:38,063 --> 00:01:42,975 my intent here is to hook this method up to the input's change event. 28 00:01:42,975 --> 00:01:48,866 Next, I'll scroll down to the form input on line 78. 29 00:01:48,866 --> 00:01:53,159 And here I'll bind the handler to change events. 30 00:01:56,085 --> 00:02:00,950 So below the type attribute, Let's add 31 00:02:00,950 --> 00:02:06,055 onChange = {this.handleNameInput}. 32 00:02:06,055 --> 00:02:08,906 And I'll also connect it to value property, 33 00:02:08,906 --> 00:02:11,690 to the pendingGuest property on the state. 34 00:02:11,690 --> 00:02:19,156 So I'm gonna set value here to (this.state.pendingGuest). 35 00:02:20,651 --> 00:02:22,665 Hopefully, that wasn't too tough. 36 00:02:22,665 --> 00:02:26,606 It was a little different though because we've always passed handlers through 37 00:02:26,606 --> 00:02:27,323 the app tree. 38 00:02:27,323 --> 00:02:31,896 This handler was connected to the same component it was declared in. 39 00:02:31,896 --> 00:02:35,400 The next challenge will have a few more steps, but I think you're up to it. 40 00:02:35,400 --> 00:02:39,320 Now I want to challenge you to add a new guest to the list when the user 41 00:02:39,320 --> 00:02:40,304 submits a name. 42 00:02:40,304 --> 00:02:42,968 This will combine a number of skills you've already learned, and 43 00:02:42,968 --> 00:02:43,879 I'll give you a hint. 44 00:02:43,879 --> 00:02:48,393 Don't forget to prevent the form's default behavior when it submits in your handler 45 00:02:48,393 --> 00:02:50,223 or your app will do a hard refresh. 46 00:02:50,223 --> 00:02:52,904 Also, make sure new guests go to the top of the list. 47 00:02:52,904 --> 00:02:54,736 So go ahead and pause the video, give it a try. 48 00:02:54,736 --> 00:02:58,068 And if you get stumped, unpause and I'll show you how I did it. 49 00:02:58,068 --> 00:03:03,847 So I'll start by creating the method that sets the state on submit. 50 00:03:03,847 --> 00:03:08,056 I'll call it newGuestSubmitHandler. 51 00:03:12,371 --> 00:03:15,318 And I'll pass it the event object. 52 00:03:17,347 --> 00:03:21,916 So, first, we'll prevent the form's default behavior by 53 00:03:21,916 --> 00:03:25,421 calling preventDefault on the event object. 54 00:03:30,619 --> 00:03:35,119 And I know I need to add a new guest to the guests array. 55 00:03:35,119 --> 00:03:40,592 So I'll call set state with this.setState, 56 00:03:43,641 --> 00:03:47,646 Passing in a new object with a guest property. 57 00:03:51,672 --> 00:03:54,363 And the property points to an array. 58 00:03:54,363 --> 00:03:57,733 In the array, I'll put a new object literal. 59 00:03:57,733 --> 00:04:00,070 And this is going to my new guest. 60 00:04:00,070 --> 00:04:05,446 So I'll set the name to the pending guest property 61 00:04:05,446 --> 00:04:10,703 on the state with this.state.pendingGuest. 62 00:04:10,703 --> 00:04:14,782 And I'll set its other flags, or booleans, to false. 63 00:04:14,782 --> 00:04:19,362 So, first, isConfirmed: false, 64 00:04:19,362 --> 00:04:22,917 then, isEditing: false. 65 00:04:26,591 --> 00:04:31,087 Now I'll use the spread operator with the existing guest array to 66 00:04:31,087 --> 00:04:34,531 populate my new array with the values from state. 67 00:04:37,702 --> 00:04:39,402 And the form needs to clear. 68 00:04:39,402 --> 00:04:44,629 So I'm going to set the pendingGuest property to an empty string. 69 00:04:48,711 --> 00:04:54,900 Finally, with my handler now created, I'll bind it to the form submit event. 70 00:04:54,900 --> 00:05:00,445 I'll scroll down to the form element and 71 00:05:00,445 --> 00:05:07,956 add onSubmit = {this.newGuestSubmitHandler}. 72 00:05:07,956 --> 00:05:11,011 So as you saw there were a number of steps to this challenge. 73 00:05:11,011 --> 00:05:14,144 If you found yourself getting a little lost, that's okay. 74 00:05:14,144 --> 00:05:17,120 I would recommend going back over the explanation and 75 00:05:17,120 --> 00:05:19,377 even erasing what you had and try again. 76 00:05:19,377 --> 00:05:23,175 The more you repeat these steps the better your brain will map out what needs to 77 00:05:23,175 --> 00:05:24,584 be done to program in React. 78 00:05:24,584 --> 00:05:27,942 All right, so let's test our new feature in the browser. 79 00:05:27,942 --> 00:05:31,106 I'll type a new name into the form. 80 00:05:31,106 --> 00:05:34,309 And when you click on the Submit button or press Enter, 81 00:05:34,309 --> 00:05:36,480 the name is added to the list, good. 82 00:05:36,480 --> 00:05:38,573 So we're getting close to completion, 83 00:05:38,573 --> 00:05:40,977 we just have a few more features to implement. 84 00:05:40,977 --> 00:05:44,769 In the next video, you'll create a feature to remove guest from the app.