1

00:00:00,510 --> 00:00:05,689

2
00:00:06,000 --> 00:00:11,030
So go ahead and get the starting sandbox and fork your own copy.

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.

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

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

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

7
00:00:40,040 --> 00:00:41,750
this get time button.

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

9
00:00:50,360 --> 00:00:52,080
this .

10
00:00:52,400 --> 00:00:54,930
This is what you should end up with.

11
00:00:54,950 --> 00:00:59,760
Notice how when you refresh the app it loads up the time in the .

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

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
14
00:01:14,600 --> 00:01:18,920
but effectively this is what you're aiming for with part 1 of the challenge.

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

16
00:01:25,760 --> 00:01:26,750
every second

17
00:01:26,750 --> 00:01:27,710
like so.

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

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

20
00:01:41,270 --> 00:01:41,900
the moment

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.

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

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

24
00:02:02,780 --> 00:02:04,010
stopping it.

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

26
00:02:10,550 --> 00:02:11,820
you want to call.

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

28
00:02:16,670 --> 00:02:19,880
anymore, don't worry all your progress will be saved.

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.

30
00:02:26,390 --> 00:02:35,190
Pause the video now and see if you can complete complete these two challenges.

31
00:02:35,690 --> 00:02:35,960
All right.

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

33
00:02:40,820 --> 00:02:43,270
do is we're going to use this line of code.

34
00:02:43,280 --> 00:02:47,800
So I'm just going to copy it over. And inside my app function

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

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

37
00:03:01,460 --> 00:03:07,550
works and make sure that we delete the log statement from our index.js.

38
00:03:07,760 --> 00:03:10,310
Now we can see the time in our console.

39
00:03:10,400 --> 00:03:12,920
It's just a matter of getting this time

40
00:03:12,920 --> 00:03:16,060
now inside our .
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

42
00:03:21,320 --> 00:03:25,490
state, we're going to be using the useState hook.

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

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

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

46
00:03:46,010 --> 00:03:47,490
to update this time.

47
00:03:47,490 --> 00:03:53,730
So call it setTime. And I'm gonna set it equal to useState.

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

49
00:03:59,490 --> 00:04:03,350
required import in order to get hold of this function.

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

51
00:04:10,680 --> 00:04:13,600
for the state which I'm going to set to now.

52
00:04:13,800 --> 00:04:16,019
That's the starting time right?

53
00:04:16,230 --> 00:04:20,640
And I'm going to use this piece of state inside my .
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

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.

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

57
00:04:41,390 --> 00:04:46,540
trigger a function to update the time to the latest value.

58
00:04:46,550 --> 00:04:49,480
So I'm going to have to call this line of code again.

59
00:04:49,550 --> 00:04:52,640
I know that my button I've got a onClick listener

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.

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

62
00:05:06,110 --> 00:05:09,980
call when that button gets clicked.

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.

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

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

66
00:05:30,740 --> 00:05:34,540
that using the setTime function that I defined.

67
00:05:34,700 --> 00:05:39,370
You can call it whatever you want but the position is what matters.

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

69
00:05:45,110 --> 00:05:47,100
be the update function.

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.

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

72
00:06:03,200 --> 00:06:06,180
localTimeString like

73
00:06:06,220 --> 00:06:13,050
so. Now I'm going to pass the value of newTime into my setTime function

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

75
00:06:21,890 --> 00:06:29,150
of that time variable and re-render it inside my React app.

76
00:06:29,520 --> 00:06:32,770
Part 2 of the challenge is actually pretty simple.

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

78
00:06:40,560 --> 00:06:46,540
it to say hi, we want it to trigger an update to our time.

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

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.

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

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

83
00:07:18,000 --> 00:07:19,300
you've seen the solution.

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.