WEBVTT 0 00:00.510 --> 00:05.690 All right guys. In this lesson you're going to get some more practice on the useState hook. 1 00:06.000 --> 00:11.030 So go ahead and get the starting sandbox and fork your own copy. 2 00:11.180 --> 00:17.080 Now take a look at the challenge inside the index.js and there's two parts to this. 3 00:17.090 --> 00:23.690 The first part is that given that you can get the current time using this line of code and you can see 4 00:23.690 --> 00:30.800 that it's being console logged over here and see if you can change the code inside the App.js 5 00:30.800 --> 00:39.980 x to show this time inside this

which currently just says time every time the user presses 6 00:40.040 --> 00:41.750 this get time button. 7 00:41.750 --> 00:50.300 The idea is that when they press get time, it's going to fetch the latest time and display it inside 8 00:50.360 --> 00:52.080 this

. 9 00:52.400 --> 00:54.930 This is what you should end up with. 10 00:54.950 --> 00:59.760 Notice how when you refresh the app it loads up the time in the

. 11 00:59.990 --> 01:07.220 But every time you click the get time button it refreshes the

to show the latest time 12 01:07.280 --> 01:14.150 at the time when you press that button. And you can press it every second for it to update more or less 13 01:14.600 --> 01:18.920 but effectively this is what you're aiming for with part 1 of the challenge. 14 01:18.980 --> 01:25.400 And then as an addon to the challenge, in part 2 I want you to see if you can get the time to be updated 15 01:25.760 --> 01:26.750 every second 16 01:26.750 --> 01:27.710 like so. 17 01:27.710 --> 01:34.220 So it's dynamically refreshing the time every second and showing the latest time without having to press 18 01:34.310 --> 01:41.270 the get time button. And in order to achieve this you're going to be using the set interval method. At 19 01:41.270 --> 01:41.900 the moment 20 01:41.900 --> 01:47.830 I've got it set so that it calls sayHi every 1000 milliseconds so every second. 21 01:47.930 --> 01:55.760 Now as a word of warning, if you don't specify this time it will try to call it every millisecond and 22 01:55.760 --> 02:02.780 it will crash your code sandbox and things will become unresponsive and you might have trouble even 23 02:02.780 --> 02:04.010 stopping it. 24 02:04.070 --> 02:10.550 Now firstly you can prevent this by always specifying the time period first before you specify the function 25 02:10.550 --> 02:11.820 you want to call. 26 02:12.020 --> 02:16.670 And if you do in fact crash your code sandbox and it becomes unresponsive and you can't type anything 27 02:16.670 --> 02:19.880 anymore, don't worry all your progress will be saved. 28 02:19.910 --> 02:25.220 Just go ahead and close everything down and restart Chrome and navigate back to that sandbox of yours. 29 02:26.390 --> 02:35.190 Pause the video now and see if you can complete complete these two challenges. 30 02:35.690 --> 02:35.960 All right. 31 02:35.990 --> 02:40.820 So all of the action is going to happen inside our App.jsx. And the first thing we're going to 32 02:40.820 --> 02:43.270 do is we're going to use this line of code. 33 02:43.280 --> 02:47.800 So I'm just going to copy it over. And inside my app function 34 02:47.810 --> 02:53.420 the first thing I'm going to do is I'm going to create a new constant called now and I'm gonna set it 35 02:53.480 --> 03:01.160 equal to new date toLocalTimeString. And then let's just log it to make sure that it actually 36 03:01.460 --> 03:07.550 works and make sure that we delete the log statement from our index.js. 37 03:07.760 --> 03:10.310 Now we can see the time in our console. 38 03:10.400 --> 03:12.920 It's just a matter of getting this time 39 03:12.920 --> 03:16.060 now inside our

. 40 03:16.130 --> 03:21.320 And because this is something that's going to change continuously where we need to keep track of its 41 03:21.320 --> 03:25.490 state, we're going to be using the useState hook. 42 03:25.490 --> 03:32.300 I'm going to create a new constant which I'm going to set as a destructured array and the first item in 43 03:32.300 --> 03:39.960 the array is the name of this piece of data or the state of this piece of data. So I'm going to call 44 03:39.960 --> 03:46.010 mine just time and the second item that goes in this array is going to be the function that's going 45 03:46.010 --> 03:47.490 to update this time. 46 03:47.490 --> 03:53.730 So call it setTime. And I'm gonna set it equal to useState. 47 03:53.850 --> 03:59.370 And notice how as soon as I insert it, there's actually a piece of script that automatically adds the 48 03:59.490 --> 04:03.350 required import in order to get hold of this function. 49 04:03.360 --> 04:10.200 Now I'm going to add a set of parentheses and inside the parentheses I get to set the starting value 50 04:10.680 --> 04:13.600 for the state which I'm going to set to now. 51 04:13.800 --> 04:16.020 That's the starting time right? 52 04:16.230 --> 04:20.640 And I'm going to use this piece of state inside my

. 53 04:20.670 --> 04:27.030 So I'm going to replace the time that's hardcoded into my

and open a set of curly braces in order 54 04:27.030 --> 04:35.650 to insert the dynamic value of time into this

. And you can now see it right here. 55 04:35.750 --> 04:41.390 Now the next thing I need to tackle is when the user clicks on this button get time, I want want it to 56 04:41.390 --> 04:46.540 trigger a function to update the time to the latest value. 57 04:46.550 --> 04:49.480 So I'm going to have to call this line of code again. 58 04:49.550 --> 04:52.640 I know that my button I've got a onClick listener 59 04:53.090 --> 04:59.270 and I can set it to equal a function that can be triggered when this button is pressed. 60 04:59.270 --> 05:06.110 So I'm going to create a function that's going to be called update time and this is what I'm going to 61 05:06.110 --> 05:09.980 call when that button gets clicked. 62 05:09.980 --> 05:14.930 And because this is code, we're going to add it inside a set of curly braces. 63 05:15.110 --> 05:23.090 And now this function will get called every time I press the get time button like so. Now instead of 64 05:23.090 --> 05:30.740 console logging called, what I want to happen inside here is to update this time. And I'm going to do 65 05:30.740 --> 05:34.540 that using the setTime function that I defined. 66 05:34.700 --> 05:39.370 You can call it whatever you want but the position is what matters. 67 05:39.440 --> 05:45.110 The one at position 0 is going to be the value and the name of the item at position 2 is going to 68 05:45.110 --> 05:47.100 be the update function. 69 05:47.180 --> 05:54.740 So let's call setTime and inside these parentheses, I have to give it a new time to update. 70 05:54.740 --> 06:03.180 So I'm going to create a new constant called newTime and I'm going to set it to equal new date to 71 06:03.200 --> 06:06.180 localTimeString like 72 06:06.220 --> 06:13.050 so. Now I'm going to pass the value of newTime into my setTime function 73 06:13.160 --> 06:21.800 and now if we pop out our app every time I press on the get time, it will dynamically update the value 74 06:21.890 --> 06:29.150 of that time variable and re-render it inside my React app. 75 06:29.520 --> 06:32.770 Part 2 of the challenge is actually pretty simple. 76 06:32.970 --> 06:40.560 We need this setInterval function to be called Somewhere Inside our app function. And instead of getting 77 06:40.560 --> 06:46.540 it to say hi, we want it to trigger an update to our time. 78 06:46.620 --> 06:53.970 So we're going to call update time and what this will do is it will create a new constant set to the 79 06:53.970 --> 07:03.960 current time and it's going to update our time variable which is used in our

, every single second. 80 07:03.960 --> 07:11.460 This update time gets called every second and that creates this dynamic refreshing

. 81 07:11.850 --> 07:18.000 Did you manage to complete this challenge? If not, be sure to go back and try to tackle it again now that 82 07:18.000 --> 07:19.300 you've seen the solution. 83 07:19.380 --> 07:24.030 It's all about practice and getting that muscle memory when it comes to using new syntax.