All right guys. In this lesson you're going to get some more practice on the useState hook. 1
So go ahead and get the starting sandbox and fork your own copy. 2
Now take a look at the challenge inside the index.js and there's two parts to this. 3
The first part is that given that you can get the current time using this line of code and you can see 4
that it's being console logged over here and see if you can change the code inside the App.js 5
x to show this time inside this which currently just says time every time the user presses 6
this get time button. 7
The idea is that when they press get time, it's going to fetch the latest time and display it inside 8
this . 9
This is what you should end up with. 10
Notice how when you refresh the app it loads up the time in the . 11
But every time you click the get time button it refreshes the to show the latest time 12
at the time when you press that button. And you can press it every second for it to update more or less 13
but effectively this is what you're aiming for with part 1 of the challenge. 14
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
every second 16
like so. 17
So it's dynamically refreshing the time every second and showing the latest time without having to press 18
the get time button. And in order to achieve this you're going to be using the set interval method. At 19
the moment 20
I've got it set so that it calls sayHi every 1000 milliseconds so every second. 21
Now as a word of warning, if you don't specify this time it will try to call it every millisecond and 22
it will crash your code sandbox and things will become unresponsive and you might have trouble even 23
stopping it. 24
Now firstly you can prevent this by always specifying the time period first before you specify the function 25
you want to call. 26
And if you do in fact crash your code sandbox and it becomes unresponsive and you can't type anything 27
anymore, don't worry all your progress will be saved. 28
Just go ahead and close everything down and restart Chrome and navigate back to that sandbox of yours. 29
Pause the video now and see if you can complete complete these two challenges. 30
All right. 31
So all of the action is going to happen inside our App.jsx. And the first thing we're going to 32
do is we're going to use this line of code. 33
So I'm just going to copy it over. And inside my app function 34
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
equal to new date toLocalTimeString. And then let's just log it to make sure that it actually 36
works and make sure that we delete the log statement from our index.js. 37
Now we can see the time in our console. 38
It's just a matter of getting this time 39
now inside our . 40
And because this is something that's going to change continuously where we need to keep track of its 41
state, we're going to be using the useState hook. 42
I'm going to create a new constant which I'm going to set as a destructured array and the first item in 43
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
mine just time and the second item that goes in this array is going to be the function that's going 45
to update this time. 46
So call it setTime. And I'm gonna set it equal to useState. 47
And notice how as soon as I insert it, there's actually a piece of script that automatically adds the 48
required import in order to get hold of this function. 49
Now I'm going to add a set of parentheses and inside the parentheses I get to set the starting value 50
for the state which I'm going to set to now. 51
That's the starting time right? 52
And I'm going to use this piece of state inside my . 53
So I'm going to replace the time that's hardcoded into my and open a set of curly braces in order 54
to insert the dynamic value of time into this . And you can now see it right here. 55
Now the next thing I need to tackle is when the user clicks on this button get time, I want want it to 56
trigger a function to update the time to the latest value. 57
So I'm going to have to call this line of code again. 58
I know that my button I've got a onClick listener 59
and I can set it to equal a function that can be triggered when this button is pressed. 60
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
call when that button gets clicked. 62
And because this is code, we're going to add it inside a set of curly braces. 63
And now this function will get called every time I press the get time button like so. Now instead of 64
console logging called, what I want to happen inside here is to update this time. And I'm going to do 65
that using the setTime function that I defined. 66
You can call it whatever you want but the position is what matters. 67
The one at position 0 is going to be the value and the name of the item at position 2 is going to 68
be the update function. 69
So let's call setTime and inside these parentheses, I have to give it a new time to update. 70
So I'm going to create a new constant called newTime and I'm going to set it to equal new date to 71
localTimeString like 72
so. Now I'm going to pass the value of newTime into my setTime function 73
and now if we pop out our app every time I press on the get time, it will dynamically update the value 74
of that time variable and re-render it inside my React app. 75
Part 2 of the challenge is actually pretty simple. 76
We need this setInterval function to be called Somewhere Inside our app function. And instead of getting 77
it to say hi, we want it to trigger an update to our time. 78
So we're going to call update time and what this will do is it will create a new constant set to the 79
current time and it's going to update our time variable which is used in our , every single second. 80
This update time gets called every second and that creates this dynamic refreshing . 81
Did you manage to complete this challenge? If not, be sure to go back and try to tackle it again now that 82
you've seen the solution. 83
It's all about practice and getting that muscle memory when it comes to using new syntax.