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.