0 1 00:00:00,510 --> 00:00:05,690 All right guys. In this lesson you're going to get some more practice on the useState hook. 1 2 00:00:06,000 --> 00:00:11,030 So go ahead and get the starting sandbox and fork your own copy. 2 3 00:00:11,180 --> 00:00:17,080 Now take a look at the challenge inside the index.js and there's two parts to this. 3 4 00:00:17,090 --> 00: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 5 00:00:23,690 --> 00:00:30,800 that it's being console logged over here and see if you can change the code inside the App.js 5 6 00:00:30,800 --> 00:00:39,980 x to show this time inside this

which currently just says time every time the user presses 6 7 00:00:40,040 --> 00:00:41,750 this get time button. 7 8 00:00:41,750 --> 00: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 9 00:00:50,360 --> 00:00:52,080 this

. 9 10 00:00:52,400 --> 00:00:54,930 This is what you should end up with. 10 11 00:00:54,950 --> 00:00:59,760 Notice how when you refresh the app it loads up the time in the

. 11 12 00:00:59,990 --> 00:01:07,220 But every time you click the get time button it refreshes the

to show the latest time 12 13 00:01:07,280 --> 00: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 14 00:01:14,600 --> 00:01:18,920 but effectively this is what you're aiming for with part 1 of the challenge. 14 15 00:01:18,980 --> 00: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 16 00:01:25,760 --> 00:01:26,750 every second 16 17 00:01:26,750 --> 00:01:27,710 like so. 17 18 00:01:27,710 --> 00:01:34,220 So it's dynamically refreshing the time every second and showing the latest time without having to press 18 19 00:01:34,310 --> 00: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 20 00:01:41,270 --> 00:01:41,900 the moment 20 21 00:01:41,900 --> 00:01:47,830 I've got it set so that it calls sayHi every 1000 milliseconds so every second. 21 22 00:01:47,930 --> 00: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 23 00:01:55,760 --> 00:02:02,780 it will crash your code sandbox and things will become unresponsive and you might have trouble even 23 24 00:02:02,780 --> 00:02:04,010 stopping it. 24 25 00:02:04,070 --> 00:02:10,550 Now firstly you can prevent this by always specifying the time period first before you specify the function 25 26 00:02:10,550 --> 00:02:11,820 you want to call. 26 27 00:02:12,020 --> 00:02:16,670 And if you do in fact crash your code sandbox and it becomes unresponsive and you can't type anything 27 28 00:02:16,670 --> 00:02:19,880 anymore, don't worry all your progress will be saved. 28 29 00:02:19,910 --> 00:02:25,220 Just go ahead and close everything down and restart Chrome and navigate back to that sandbox of yours. 29 30 00:02:26,390 --> 00:02:35,190 Pause the video now and see if you can complete complete these two challenges. 30 31 00:02:35,690 --> 00:02:35,960 All right. 31 32 00:02:35,990 --> 00: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 33 00:02:40,820 --> 00:02:43,270 do is we're going to use this line of code. 33 34 00:02:43,280 --> 00:02:47,800 So I'm just going to copy it over. And inside my app function 34 35 00:02:47,810 --> 00: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 36 00:02:53,480 --> 00:03:01,160 equal to new date toLocalTimeString. And then let's just log it to make sure that it actually 36 37 00:03:01,460 --> 00:03:07,550 works and make sure that we delete the log statement from our index.js. 37 38 00:03:07,760 --> 00:03:10,310 Now we can see the time in our console. 38 39 00:03:10,400 --> 00:03:12,920 It's just a matter of getting this time 39 40 00:03:12,920 --> 00:03:16,060 now inside our

. 40 41 00:03:16,130 --> 00:03:21,320 And because this is something that's going to change continuously where we need to keep track of its 41 42 00:03:21,320 --> 00:03:25,490 state, we're going to be using the useState hook. 42 43 00:03:25,490 --> 00: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 44 00:03:32,300 --> 00: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 45 00:03:39,960 --> 00: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 46 00:03:46,010 --> 00:03:47,490 to update this time. 46 47 00:03:47,490 --> 00:03:53,730 So call it setTime. And I'm gonna set it equal to useState. 47 48 00:03:53,850 --> 00:03:59,370 And notice how as soon as I insert it, there's actually a piece of script that automatically adds the 48 49 00:03:59,490 --> 00:04:03,350 required import in order to get hold of this function. 49 50 00:04:03,360 --> 00: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 51 00:04:10,680 --> 00:04:13,600 for the state which I'm going to set to now. 51 52 00:04:13,800 --> 00:04:16,020 That's the starting time right? 52 53 00:04:16,230 --> 00:04:20,640 And I'm going to use this piece of state inside my

. 53 54 00:04:20,670 --> 00: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 55 00:04:27,030 --> 00:04:35,650 to insert the dynamic value of time into this

. And you can now see it right here. 55 56 00:04:35,750 --> 00: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 57 00:04:41,390 --> 00:04:46,540 trigger a function to update the time to the latest value. 57 58 00:04:46,550 --> 00:04:49,480 So I'm going to have to call this line of code again. 58 59 00:04:49,550 --> 00:04:52,640 I know that my button I've got a onClick listener 59 60 00:04:53,090 --> 00:04:59,270 and I can set it to equal a function that can be triggered when this button is pressed. 60 61 00:04:59,270 --> 00: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 62 00:05:06,110 --> 00:05:09,980 call when that button gets clicked. 62 63 00:05:09,980 --> 00:05:14,930 And because this is code, we're going to add it inside a set of curly braces. 63 64 00:05:15,110 --> 00:05:23,090 And now this function will get called every time I press the get time button like so. Now instead of 64 65 00:05:23,090 --> 00: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 66 00:05:30,740 --> 00:05:34,540 that using the setTime function that I defined. 66 67 00:05:34,700 --> 00:05:39,370 You can call it whatever you want but the position is what matters. 67 68 00:05:39,440 --> 00: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 69 00:05:45,110 --> 00:05:47,100 be the update function. 69 70 00:05:47,180 --> 00:05:54,740 So let's call setTime and inside these parentheses, I have to give it a new time to update. 70 71 00:05:54,740 --> 00: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 72 00:06:03,200 --> 00:06:06,180 localTimeString like 72 73 00:06:06,220 --> 00:06:13,050 so. Now I'm going to pass the value of newTime into my setTime function 73 74 00:06:13,160 --> 00: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 75 00:06:21,890 --> 00:06:29,150 of that time variable and re-render it inside my React app. 75 76 00:06:29,520 --> 00:06:32,770 Part 2 of the challenge is actually pretty simple. 76 77 00:06:32,970 --> 00:06:40,560 We need this setInterval function to be called Somewhere Inside our app function. And instead of getting 77 78 00:06:40,560 --> 00:06:46,540 it to say hi, we want it to trigger an update to our time. 78 79 00:06:46,620 --> 00: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 80 00:06:53,970 --> 00:07:03,960 current time and it's going to update our time variable which is used in our

, every single second. 80 81 00:07:03,960 --> 00:07:11,460 This update time gets called every second and that creates this dynamic refreshing

. 81 82 00:07:11,850 --> 00: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 83 00:07:18,000 --> 00:07:19,300 you've seen the solution. 83 84 00:07:19,380 --> 00:07:24,030 It's all about practice and getting that muscle memory when it comes to using new syntax.