The last section had a exercise around making use of state inside of a class based component.
This was a somewhat challenging exercise.
So let's go over the solutions together right now.
We have a component called clock and the intent of it is to show the current time and update that time
once per second inside of the component did mount method.
We set up a interval right here.
An interval is a built in or the set interval function is a built in javascript function.
It's going to run this inner function.
This era one right here.
Once every second and so right now once every second we are taking the current time printing it up as
a nice little string and assigning it to the start time property.
Now this code right here it definitely works but it does not update our component.
At no point in time right now is the component ever going to be updated and show the updated time over
here.
So in order to make sure that we actually update our component and show the updated time on the screen
we need to set our time on state as opposed to this little instance variable of the start time whenever
we assign a value to an instance variable.
There is no automatic update of that component.
OK.
So let's get to it.
The first thing we'll do is initialize our state object up at the top of the class sowles say States
is time and I'm going to default the value of time to be an empty string like so.
Now inside of the set interval function we don't need this start time or anything like that anymore.
So I'm going to delete that reference and I will replace it with a set state call.
I'll say this starts set States is going to be an object.
We're going to update the time property and I want the updated property to be a new date at 2:00 local
time string like so.
Now notice that there is an E after local right there like local local time string.
So now every single second we're going to run the set interval.
We're going to call set state and that's going to cause our component to render itself automatically.
Now the last thing we do is make sure that inside the render method we do not reference this time because
we're not making use of this time anymore.
Remember that was kind of like a naive or bad approach to solve this problem.
So I'm going to replace this time with this state time instead.
Now when I do so you'll notice that we get the correct time print out over here.
Now there's one little optimization that we could do right here if we wanted to at present when we first
initialize our state object we're setting time to be an empty string.
We could instead initialize it to the current time.
I don't know if you noticed it but when the preview over here refreshed itself there was a very brief
period of time where we did not see the time appear at all.
And that was because we had not yet updated our time property inside this set interval.
Just to give you a very quick example of that I'm going to add a little like period right here and then
watch on the right hand side.
Yeah I saw that there was like a little brief period of time where there was no time.
So if we wanted to we could initialize our time property to be the same thing that you see right here.
So I would say you date 2:00 local time string like so and now when our state is first initialized we're
going to get the current time.
And then one second later we're going to have the set interval kick in and update the clock over here.
All right.
So that's pretty much it.
I'm going to check my solution.
And after a brief pause Yep looks like we're good to go.
All right.
So it looks good.
Let's continue the next section.
And we're going to start working on a project.