1 00:00:00,840 --> 00:00:01,673 Instructor: In the last section, 2 00:00:01,673 --> 00:00:03,990 we created our CommentBox component 3 00:00:03,990 --> 00:00:06,810 and turned it into a class-based component. 4 00:00:06,810 --> 00:00:08,730 We're now going to continue by wiring up 5 00:00:08,730 --> 00:00:11,130 a couple of event handlers to this thing, 6 00:00:11,130 --> 00:00:14,070 and after that, we'll then get started on our tests. 7 00:00:14,070 --> 00:00:15,450 Now the first thing I wanna do 8 00:00:15,450 --> 00:00:18,630 is create a new piece of state tied to this component, 9 00:00:18,630 --> 00:00:20,580 and that piece of state is going to manage 10 00:00:20,580 --> 00:00:21,930 the textarea right here. 11 00:00:21,930 --> 00:00:25,500 So we're going to turn this into a controlled input. 12 00:00:25,500 --> 00:00:29,010 To get started, I'll initialize my state object at the top 13 00:00:29,010 --> 00:00:31,530 by writing out state equals, 14 00:00:31,530 --> 00:00:34,410 and then we'll call the piece of state that's going to exist 15 00:00:34,410 --> 00:00:36,660 for the value of this textarea right here. 16 00:00:36,660 --> 00:00:38,850 We'll call it simply comment. 17 00:00:38,850 --> 00:00:41,100 And since it's going to eventually be a string, 18 00:00:41,100 --> 00:00:43,713 I'll default it to be an empty string, like so. 19 00:00:46,920 --> 00:00:48,750 Next up, I'll make sure that I sign 20 00:00:48,750 --> 00:00:52,500 this piece of state right here to the textarea component. 21 00:00:52,500 --> 00:00:57,003 So I'm going to say value equals this.state.comment. 22 00:00:58,770 --> 00:01:01,650 Now once we establish that, and save the file, 23 00:01:01,650 --> 00:01:05,129 if we flip back over, and wait for the refresh, 24 00:01:05,129 --> 00:01:08,193 we can then try to enter some text into the textarea. 25 00:01:10,140 --> 00:01:11,400 Any second, there we go. 26 00:01:11,400 --> 00:01:14,190 And of course I can't actually type anything inside of here 27 00:01:14,190 --> 00:01:16,860 because we've declared the value of the text area, 28 00:01:16,860 --> 00:01:20,340 but we've not allowed that element to have its value updated 29 00:01:20,340 --> 00:01:22,290 at any point in time. 30 00:01:22,290 --> 00:01:25,650 So I'm gonna make sure that I also attach an event handler 31 00:01:25,650 --> 00:01:27,240 to this textarea. 32 00:01:27,240 --> 00:01:30,150 So I'll say that anytime someone enters some text 33 00:01:30,150 --> 00:01:33,450 into this thing, we'll fire off the onChange event. 34 00:01:33,450 --> 00:01:34,833 So I'll say onChange, 35 00:01:36,570 --> 00:01:39,360 and I'm going to create a new method inside this component 36 00:01:39,360 --> 00:01:42,603 that I will call this.handleChange. 37 00:01:46,230 --> 00:01:47,610 So I'll make sure that I define that method 38 00:01:47,610 --> 00:01:50,403 inside the CommentBox by writing out handleChange. 39 00:01:53,490 --> 00:01:56,463 We'll define this as a bound arrow function, like so. 40 00:01:57,330 --> 00:02:00,120 So this arrow function will be called with the event object 41 00:02:00,120 --> 00:02:03,270 that represents the user typing in that text area. 42 00:02:03,270 --> 00:02:05,730 So I will receive that event object, 43 00:02:05,730 --> 00:02:08,639 and then inside of handleChange, I'll call setState 44 00:02:08,639 --> 00:02:11,130 to update the value of comment. 45 00:02:11,130 --> 00:02:16,130 So this.setState, comment is event.target.value, like so. 46 00:02:20,490 --> 00:02:23,370 All right, so now if we save this, and flip back over, 47 00:02:23,370 --> 00:02:25,220 I'll wait for the refresh to kick in, 48 00:02:28,020 --> 00:02:30,480 and you'll notice that we are back 49 00:02:30,480 --> 00:02:33,330 to being able to enter some text into the text input. 50 00:02:33,330 --> 00:02:34,860 Very good. 51 00:02:34,860 --> 00:02:36,960 Now the second thing I wanna take care of very quickly here 52 00:02:36,960 --> 00:02:39,990 is also wire up a form submit handler 53 00:02:39,990 --> 00:02:42,300 to the form element right here as well. 54 00:02:42,300 --> 00:02:44,370 Right now, we don't have anything to really do 55 00:02:44,370 --> 00:02:46,050 with the comment that the user entered. 56 00:02:46,050 --> 00:02:47,670 However, you'll recall that we had said 57 00:02:47,670 --> 00:02:50,730 that anytime a user enters a comment right here 58 00:02:50,730 --> 00:02:51,870 and clicks on this button, 59 00:02:51,870 --> 00:02:54,960 we want to make sure that the text inside the textarea 60 00:02:54,960 --> 00:02:57,330 gets cleared out, or kind of delete it. 61 00:02:57,330 --> 00:02:59,040 And as a matter of fact, we had originally said 62 00:02:59,040 --> 00:03:00,420 that that was one of the things 63 00:03:00,420 --> 00:03:03,570 that we actually want to test inside of our application. 64 00:03:03,570 --> 00:03:06,540 So that was right here on the CommentBox. 65 00:03:06,540 --> 00:03:09,390 We had said when the user enters some input 66 00:03:09,390 --> 00:03:12,180 and clicks on submit, that textarea should get emptied out. 67 00:03:12,180 --> 00:03:14,640 So that's definitely one of our goals. 68 00:03:14,640 --> 00:03:19,640 So on my form element, I'll add on a onSubmit event handler. 69 00:03:20,250 --> 00:03:22,620 And anytime that submit event occurs, 70 00:03:22,620 --> 00:03:25,350 we'll call a callback function that will call, 71 00:03:25,350 --> 00:03:27,180 how about simply handleSubmit. 72 00:03:27,180 --> 00:03:28,480 I think that's reasonable. 73 00:03:29,580 --> 00:03:31,280 And then we'll define handleSubmit 74 00:03:32,430 --> 00:03:34,143 inside of our component as well. 75 00:03:35,010 --> 00:03:36,840 Now just like before, this event handler 76 00:03:36,840 --> 00:03:39,990 is going to be called with an event object. 77 00:03:39,990 --> 00:03:42,630 This is a HTML form right here, 78 00:03:42,630 --> 00:03:44,280 and we want to make sure that this form 79 00:03:44,280 --> 00:03:46,470 does not try to submit itself. 80 00:03:46,470 --> 00:03:49,050 So the first thing that we'll do inside this event handler 81 00:03:49,050 --> 00:03:51,750 is call event.preventDefault, 82 00:03:51,750 --> 00:03:54,393 and that'll keep our page from attempting to reload. 83 00:03:55,470 --> 00:03:57,630 Then, maybe right here or somewhere, 84 00:03:57,630 --> 00:03:59,580 we're going to eventually want to make sure 85 00:03:59,580 --> 00:04:02,320 we call an action creator 86 00:04:03,900 --> 00:04:07,830 and save the comment that got entered by the user. 87 00:04:07,830 --> 00:04:09,660 So we don't have any Redux wired up 88 00:04:09,660 --> 00:04:10,770 to our application just yet. 89 00:04:10,770 --> 00:04:13,830 So we're not gonna take care of that just right now, 90 00:04:13,830 --> 00:04:17,640 but at least we can attempt to empty out that text area, 91 00:04:17,640 --> 00:04:20,733 and we can do so by calling this.setState. 92 00:04:22,050 --> 00:04:25,080 And then we'll set comment to be an empty string. 93 00:04:25,080 --> 00:04:28,440 So that will cause the text area to empty itself out. 94 00:04:28,440 --> 00:04:30,270 And then I'm gonna put a little space in here, 95 00:04:30,270 --> 00:04:31,620 just to make sure that it's clear 96 00:04:31,620 --> 00:04:33,480 that we still have to do the step right here. 97 00:04:33,480 --> 00:04:34,313 And you know what, why not? 98 00:04:34,313 --> 00:04:36,580 Let's put a little to-do note on there as well. 99 00:04:38,190 --> 00:04:40,500 Okay, so now we'll do another quick test inside the browser 100 00:04:40,500 --> 00:04:42,360 for this as well. 101 00:04:42,360 --> 00:04:44,260 If I flip back over to my application. 102 00:04:48,060 --> 00:04:49,710 Any second now, there we go. 103 00:04:49,710 --> 00:04:51,570 I should be able to enter in some text, 104 00:04:51,570 --> 00:04:54,780 click on submit comment, the page does not reload. 105 00:04:54,780 --> 00:04:56,790 So we've prevented that default behavior, 106 00:04:56,790 --> 00:04:58,380 and you'll notice that the text area 107 00:04:58,380 --> 00:05:00,210 gets emptied out as well. 108 00:05:00,210 --> 00:05:01,650 So this is looking pretty good. 109 00:05:01,650 --> 00:05:03,000 Let's continue in the next section, 110 00:05:03,000 --> 00:05:04,470 and we're gonna start writing some tests 111 00:05:04,470 --> 00:05:05,910 around our comment box. 112 00:05:05,910 --> 00:05:08,410 So quick break, and I'll see you in just a minute.