1 00:00:00,840 --> 00:00:05,790 The last section had a exercise around making use of state inside of a class based component. 2 00:00:05,790 --> 00:00:07,850 This was a somewhat challenging exercise. 3 00:00:07,890 --> 00:00:10,740 So let's go over the solutions together right now. 4 00:00:10,740 --> 00:00:16,050 We have a component called clock and the intent of it is to show the current time and update that time 5 00:00:16,110 --> 00:00:19,880 once per second inside of the component did mount method. 6 00:00:19,920 --> 00:00:21,810 We set up a interval right here. 7 00:00:22,020 --> 00:00:26,910 An interval is a built in or the set interval function is a built in javascript function. 8 00:00:27,150 --> 00:00:29,120 It's going to run this inner function. 9 00:00:29,130 --> 00:00:30,510 This era one right here. 10 00:00:30,510 --> 00:00:36,300 Once every second and so right now once every second we are taking the current time printing it up as 11 00:00:36,300 --> 00:00:39,980 a nice little string and assigning it to the start time property. 12 00:00:40,260 --> 00:00:44,820 Now this code right here it definitely works but it does not update our component. 13 00:00:44,940 --> 00:00:50,040 At no point in time right now is the component ever going to be updated and show the updated time over 14 00:00:50,040 --> 00:00:51,030 here. 15 00:00:51,030 --> 00:00:55,800 So in order to make sure that we actually update our component and show the updated time on the screen 16 00:00:56,250 --> 00:01:02,790 we need to set our time on state as opposed to this little instance variable of the start time whenever 17 00:01:02,790 --> 00:01:04,880 we assign a value to an instance variable. 18 00:01:04,890 --> 00:01:07,590 There is no automatic update of that component. 19 00:01:07,880 --> 00:01:08,060 OK. 20 00:01:08,070 --> 00:01:09,320 So let's get to it. 21 00:01:09,360 --> 00:01:14,850 The first thing we'll do is initialize our state object up at the top of the class sowles say States 22 00:01:14,940 --> 00:01:20,610 is time and I'm going to default the value of time to be an empty string like so. 23 00:01:22,440 --> 00:01:28,110 Now inside of the set interval function we don't need this start time or anything like that anymore. 24 00:01:28,170 --> 00:01:33,190 So I'm going to delete that reference and I will replace it with a set state call. 25 00:01:33,330 --> 00:01:37,110 I'll say this starts set States is going to be an object. 26 00:01:37,380 --> 00:01:46,110 We're going to update the time property and I want the updated property to be a new date at 2:00 local 27 00:01:46,320 --> 00:01:48,870 time string like so. 28 00:01:49,050 --> 00:01:55,520 Now notice that there is an E after local right there like local local time string. 29 00:01:55,530 --> 00:01:58,780 So now every single second we're going to run the set interval. 30 00:01:58,830 --> 00:02:04,170 We're going to call set state and that's going to cause our component to render itself automatically. 31 00:02:04,170 --> 00:02:09,060 Now the last thing we do is make sure that inside the render method we do not reference this time because 32 00:02:09,060 --> 00:02:11,100 we're not making use of this time anymore. 33 00:02:11,100 --> 00:02:15,900 Remember that was kind of like a naive or bad approach to solve this problem. 34 00:02:15,900 --> 00:02:20,760 So I'm going to replace this time with this state time instead. 35 00:02:22,210 --> 00:02:25,890 Now when I do so you'll notice that we get the correct time print out over here. 36 00:02:26,760 --> 00:02:33,310 Now there's one little optimization that we could do right here if we wanted to at present when we first 37 00:02:33,370 --> 00:02:37,390 initialize our state object we're setting time to be an empty string. 38 00:02:37,390 --> 00:02:41,140 We could instead initialize it to the current time. 39 00:02:41,170 --> 00:02:46,750 I don't know if you noticed it but when the preview over here refreshed itself there was a very brief 40 00:02:46,750 --> 00:02:49,440 period of time where we did not see the time appear at all. 41 00:02:49,510 --> 00:02:54,270 And that was because we had not yet updated our time property inside this set interval. 42 00:02:54,310 --> 00:02:58,510 Just to give you a very quick example of that I'm going to add a little like period right here and then 43 00:02:58,510 --> 00:03:00,010 watch on the right hand side. 44 00:03:00,090 --> 00:03:04,830 Yeah I saw that there was like a little brief period of time where there was no time. 45 00:03:04,900 --> 00:03:10,830 So if we wanted to we could initialize our time property to be the same thing that you see right here. 46 00:03:10,900 --> 00:03:21,020 So I would say you date 2:00 local time string like so and now when our state is first initialized we're 47 00:03:21,020 --> 00:03:22,310 going to get the current time. 48 00:03:22,400 --> 00:03:28,980 And then one second later we're going to have the set interval kick in and update the clock over here. 49 00:03:29,000 --> 00:03:29,210 All right. 50 00:03:29,220 --> 00:03:30,000 So that's pretty much it. 51 00:03:30,020 --> 00:03:34,120 I'm going to check my solution. 52 00:03:34,350 --> 00:03:37,230 And after a brief pause Yep looks like we're good to go. 53 00:03:37,230 --> 00:03:37,790 All right. 54 00:03:37,890 --> 00:03:38,630 So it looks good. 55 00:03:38,670 --> 00:03:39,890 Let's continue the next section. 56 00:03:39,900 --> 00:03:42,090 And we're going to start working on a project.