All right guys. In this lesson, you're going to get some more practice on the useState Hook.
So go ahead and get the starting sandbox and fork your own copy.
Now take a look at the challenge inside the index.js and there's two parts to this.
The first part is that given that you can get the current time using this line of code, and you can see
that it's being console logged over here, and see if you can change the code inside the App.jsx
to show this time inside this h1 which currently just says, TIME every time the user presses
this Get Time button.
The idea is that when they press Get Time, it's going to fetch the latest time and display it inside
this h1.
This is what you should end up with.
Notice how when you refresh the app it loads up the time in the h1,
but every time you click the Get Time button it refreshes the h1 to show the latest time
at the time when you press that button. And you can press it every second for it to update, more or less,
but effectively this is what you're aiming for with part 1 of the challenge.
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
every second,
like so.
So that it's dynamically refreshing the time every second and showing the latest time without having to press
the Get Time button. And in order to achieve this you're going to be using the setInterval() method. At
the moment
I've got it set so that it calls, "sayHi" every 1000 milliseconds so every second.
Now as a word of warning, if you don't specify this time it will try to call it every millisecond and
it will crash your CodeSandbox and things will become unresponsive and you might have trouble even
stopping it.
Now firstly, you can prevent this by always specifying the time period first before you specify the function
you want to call.
And if you do in fact crash your CodeSandbox, and it becomes unresponsive, and you can't type anything
anymore, don't worry all your progress will be saved.
Just go ahead and close everything down and restart Chrome and navigate back to that sandbox of yours.
Pause the video now and see if you can complete complete these two challenges.
All right.
So all of the action is going to happen inside our App.jsx. And the first thing we're going to
do is we're going to use this line of code,
so I'm just going to copy it over. And inside my App function,
the first thing I'm going to do is I'm going to create a new const called now and I'm going to set it
equal to new Date().toLocaleTimeString(). And then let's just log it to make sure that it actually
works, and make sure that we delete the log statement from our index.js.
Now we can see the time in our console.
It's just a matter of getting this time
now inside our h1.
And because this is something that's going to change continuously where we need to keep track of its
state, we're going to be using the useState Hook.
I'm going to create a new const which I'm going to set as a destructured array and the first item in
the array is the name of this piece of data or the state of this piece of data. So I'm going to call
mine just time and the second item that goes in this array is going to be the function that's going
to update this time.
So I'll call it setTime. And I'm going to set it equal to useState.
And notice how as soon as I insert it, there's actually a piece of script that automatically adds the
required import in order to get hold of this function.
Now I'm going to add a set of parentheses and inside the parentheses I get to set the starting value
for the state, which I'm going to set to now.
That's the starting time, right?
And I'm going to use this piece of state inside my h1.
So I'm going to replace the time that's hardcoded into my h1, and open a set of curly braces in order
to insert the dynamic value of time into this h1. And you can now see it right here.
Now the next thing I need to tackle is when the user clicks on this button Get Time, I want it to
trigger a function to update the time to the latest value.
So I'm going to have to call this line of code again.
I know that my button I've got an onClick listener,
and I can set it to equal a function that can be triggered when this button is pressed.
So I'm going to create a function that's going to be called updateTime(), and this is what I'm going to
call when that button gets clicked.
And because this is code, we're going to add it inside a set of curly braces.
And now this function will get called every time I press the Get Time button, like so. Now instead of
console logging, "called," what I want to happen inside here is to update this time. And I'm going to do
that using the setTime function that I defined.
You can call it whatever you want but the position is what matters.
The one at position 0 is going to be the value, and the name of the item at position 2 is going to
be the update function.
So let's call setTime(), and inside these parentheses, I have to give it a new time to update.
So I'm going to create a new const called, newTime, and I'm going to set it to equal new Date().toLocaleTimeString(),
like
so. Now I'm going to pass the value of newTime into my setTime() function
and now if we pop out our app every time I press on the get time, it will dynamically update the value
of that time variable and re-render it inside my React app.
Part 2 of the challenge is actually pretty simple.
We need this setInterval function to be called somewhere Inside our App function. And instead of getting
it to sayHi, we want it to trigger an update to our time.
So we're going to call updateTime(), and what this will do is it will create a new const set to the
current time and it's going to update our time variable which is used in our h1, every single second.
This updateTime() gets called every second and that creates this dynamic refreshing h1.
Did you manage to complete this challenge? If not, be sure to go back and try to tackle it again now that
you've seen the solution.
It's all about practice and getting that muscle memory when it comes to using new syntax.