1
00:00:01,110 --> 00:00:02,820
‫Let's wrap up this section

2
00:00:02,820 --> 00:00:06,180
‫by continuing to work on the date counter challenge

3
00:00:06,180 --> 00:00:07,683
‫that we started earlier.

4
00:00:09,000 --> 00:00:11,700
‫So in this part two of the challenge,

5
00:00:11,700 --> 00:00:15,930
‫we will upgrade the date counter that we built before.

6
00:00:15,930 --> 00:00:19,350
‫So, we can still click here on these buttons

7
00:00:19,350 --> 00:00:21,300
‫to move forward in the date,

8
00:00:21,300 --> 00:00:24,690
‫but now we can also directly go to a date

9
00:00:24,690 --> 00:00:27,330
‫by defining a count here.

10
00:00:27,330 --> 00:00:30,326
‫So for example, 1000 days from now is,

11
00:00:30,326 --> 00:00:31,920
‫well, this one here,

12
00:00:31,920 --> 00:00:34,650
‫or 10,000 or 100,000,

13
00:00:34,650 --> 00:00:37,083
‫and you can keep going as you wish.

14
00:00:38,880 --> 00:00:40,893
‫So let's put it back to 1.

15
00:00:42,270 --> 00:00:45,000
‫So that is the upgrade here for the counter,

16
00:00:45,000 --> 00:00:47,370
‫and the step is also different.

17
00:00:47,370 --> 00:00:50,670
‫So instead of these buttons that we had before

18
00:00:50,670 --> 00:00:52,110
‫so similar to these ones,

19
00:00:52,110 --> 00:00:54,150
‫we now have this slider.

20
00:00:54,150 --> 00:00:56,400
‫And so now if we click here,

21
00:00:56,400 --> 00:00:58,920
‫we move up this seven here,

22
00:00:58,920 --> 00:01:02,790
‫but the seven was now defined using this nice slider.

23
00:01:02,790 --> 00:01:06,450
‫And this slider is actually just another type of

24
00:01:06,450 --> 00:01:08,220
‫HTML input element,

25
00:01:08,220 --> 00:01:10,770
‫but I will show you that here in a minute.

26
00:01:10,770 --> 00:01:14,640
‫Finally, what we also have is that we can reset.

27
00:01:14,640 --> 00:01:16,590
‫So when we click Reset,

28
00:01:16,590 --> 00:01:19,950
‫it goes back to 0 here and back to 1 in the step.

29
00:01:19,950 --> 00:01:22,350
‫And this button is only visible

30
00:01:22,350 --> 00:01:24,123
‫when one of these two changes.

31
00:01:25,290 --> 00:01:29,148
‫So let's go back and let's do that.

32
00:01:29,148 --> 00:01:33,030
‫So here I still have to code from the previous challenge,

33
00:01:33,030 --> 00:01:36,330
‫and what I'm going to do now is to fork this.

34
00:01:36,330 --> 00:01:40,050
‫So this will basically create a copy out of that other one,

35
00:01:40,050 --> 00:01:42,840
‫and so now I can keep writing the code here

36
00:01:42,840 --> 00:01:45,390
‫without changing the initial one.

37
00:01:45,390 --> 00:01:49,533
‫So what I wanted to quickly show you here is that slider.

38
00:01:51,030 --> 00:01:53,223
‫So, we can use the input.

39
00:01:54,330 --> 00:01:56,370
‫So as I said, this is now an input

40
00:01:56,370 --> 00:02:00,450
‫and the type is of range.

41
00:02:00,450 --> 00:02:02,973
‫And then we set a minimum value,

42
00:02:04,464 --> 00:02:07,080
‫you can set that to 0,

43
00:02:07,080 --> 00:02:09,543
‫and a max value to 10.

44
00:02:11,670 --> 00:02:12,503
‫Let's see.

45
00:02:13,500 --> 00:02:14,763
‫And there we go.

46
00:02:15,960 --> 00:02:19,620
‫So now this is of course an uncontrolled element now.

47
00:02:19,620 --> 00:02:22,290
‫So right now, React is not in charge

48
00:02:22,290 --> 00:02:24,600
‫of controlling this value.

49
00:02:24,600 --> 00:02:27,390
‫And so what you need to do, as you can imagine,

50
00:02:27,390 --> 00:02:31,740
‫is now make this input element a controlled element

51
00:02:31,740 --> 00:02:34,080
‫and then also this one right here.

52
00:02:34,080 --> 00:02:37,020
‫So with this, you'll practice what we just learned

53
00:02:37,020 --> 00:02:39,720
‫a little bit earlier, right?

54
00:02:39,720 --> 00:02:41,490
‫And in case you have any doubt,

55
00:02:41,490 --> 00:02:43,890
‫you can just go back to that lecture

56
00:02:43,890 --> 00:02:46,410
‫and check out the code that you wrote there.

57
00:02:46,410 --> 00:02:48,840
‫So, let me just show you here the result

58
00:02:48,840 --> 00:02:50,640
‫so you know what you have to build.

59
00:02:50,640 --> 00:02:52,500
‫So good luck with this challenge,

60
00:02:52,500 --> 00:02:56,763
‫and I see you back here in a few minutes once you are ready.

61
00:02:58,740 --> 00:03:02,340
‫All right, let's now quickly supercharge

62
00:03:02,340 --> 00:03:06,930
‫basically our counter component.

63
00:03:06,930 --> 00:03:10,203
‫So most of the things are actually not going to change here.

64
00:03:11,100 --> 00:03:14,010
‫So we already have the step state.

65
00:03:14,010 --> 00:03:16,890
‫All we have to do is to connect it now

66
00:03:16,890 --> 00:03:18,543
‫so with this input element.

67
00:03:19,530 --> 00:03:23,370
‫So the value of this element should be of course

68
00:03:23,370 --> 00:03:26,490
‫controlled by that step state.

69
00:03:26,490 --> 00:03:28,920
‫And then, we need the onChange handler

70
00:03:28,920 --> 00:03:30,600
‫just like before.

71
00:03:30,600 --> 00:03:33,210
‫So we get the current event

72
00:03:33,210 --> 00:03:37,200
‫and then we set the step based on that event,

73
00:03:37,200 --> 00:03:41,130
‫so event.target.value.

74
00:03:41,130 --> 00:03:44,973
‫And then we can get rid here off this button.

75
00:03:47,271 --> 00:03:49,353
‫And let's see.

76
00:03:50,670 --> 00:03:52,563
‫Yeah, that works already.

77
00:03:53,535 --> 00:03:56,130
‫And indeed, well,

78
00:03:56,130 --> 00:03:58,560
‫that doesn't really work, does it?

79
00:03:58,560 --> 00:04:01,530
‫So it is adding the 10 as a string.

80
00:04:01,530 --> 00:04:04,470
‫So we have a bug in our code.

81
00:04:04,470 --> 00:04:07,020
‫So the problem as you can see

82
00:04:07,020 --> 00:04:10,830
‫is that this value here is taken as a string.

83
00:04:10,830 --> 00:04:13,290
‫So that's actually the problem that we had before

84
00:04:13,290 --> 00:04:16,890
‫and that we detected using the React DevTools.

85
00:04:16,890 --> 00:04:20,490
‫And in fact, the DevTools are also available here

86
00:04:20,490 --> 00:04:23,460
‫so we could see the same thing here.

87
00:04:23,460 --> 00:04:25,860
‫So the state is 10,

88
00:04:25,860 --> 00:04:27,003
‫so 10 is a string.

89
00:04:28,410 --> 00:04:30,780
‫So we just do what we did before,

90
00:04:30,780 --> 00:04:34,080
‫which is to convert this value to a number

91
00:04:34,080 --> 00:04:37,496
‫before we then place it into the state.

92
00:04:37,496 --> 00:04:39,573
‫So let's reload that here.

93
00:04:41,520 --> 00:04:43,350
‫Take some time,

94
00:04:43,350 --> 00:04:46,203
‫and let's set it to something.

95
00:04:47,610 --> 00:04:49,350
‫And that's working now.

96
00:04:49,350 --> 00:04:51,510
‫And you see here that we have,

97
00:04:51,510 --> 00:04:55,770
‫well, that's not correct really for some reason,

98
00:04:55,770 --> 00:04:58,830
‫but what matters is that here it's actually working.

99
00:04:58,830 --> 00:05:01,740
‫So, maybe the integration here in CodeSandbox

100
00:05:01,740 --> 00:05:03,540
‫is not as good.

101
00:05:03,540 --> 00:05:05,100
‫But yeah, nevermind,

102
00:05:05,100 --> 00:05:07,830
‫what matters is that this part is working already.

103
00:05:07,830 --> 00:05:10,350
‫And now all we have to do is to create

104
00:05:10,350 --> 00:05:12,453
‫an input element here as well.

105
00:05:13,620 --> 00:05:17,280
‫So that should also not be so hard.

106
00:05:17,280 --> 00:05:19,470
‫So we no longer need this span,

107
00:05:19,470 --> 00:05:21,940
‫but instead we will use an input

108
00:05:24,510 --> 00:05:27,693
‫of the type text,

109
00:05:28,890 --> 00:05:32,460
‫the value here is count,

110
00:05:32,460 --> 00:05:33,783
‫and then onChange.

111
00:05:34,620 --> 00:05:37,953
‫Basically we want almost the same thing as before.

112
00:05:39,750 --> 00:05:41,640
‫So we get the current event

113
00:05:41,640 --> 00:05:43,023
‫and then setCount,

114
00:05:44,610 --> 00:05:47,940
‫and then this time we're not going to forget

115
00:05:47,940 --> 00:05:49,083
‫the conversion part.

116
00:05:50,040 --> 00:05:51,000
‫So we convert

117
00:05:51,000 --> 00:05:55,593
‫to a number e.target.value.

118
00:05:56,610 --> 00:05:57,720
‫And now all we need to do

119
00:05:57,720 --> 00:06:00,363
‫is to close down this element,

120
00:06:01,530 --> 00:06:02,970
‫give it a safe.

121
00:06:02,970 --> 00:06:05,940
‫And yeah, this all looks correct to me.

122
00:06:05,940 --> 00:06:06,773
‫Let's see.

123
00:06:07,740 --> 00:06:08,640
‫Something's happening here,

124
00:06:08,640 --> 00:06:11,613
‫let's close down the React Tools maybe.

125
00:06:14,100 --> 00:06:17,373
‫Yeah, anyway, let's just reload here just to be sure.

126
00:06:20,460 --> 00:06:22,020
‫So this works.

127
00:06:22,020 --> 00:06:25,503
‫And now if we input a value here, yeah, nice.

128
00:06:27,060 --> 00:06:29,610
‫So that's really, really nice.

129
00:06:29,610 --> 00:06:32,670
‫So with this, we have a bit more control over the component

130
00:06:32,670 --> 00:06:36,723
‫and we can calculate dates from now, which is quite helpful.

131
00:06:38,550 --> 00:06:42,660
‫But yeah, let's just review quickly what we did here.

132
00:06:42,660 --> 00:06:44,340
‫So these two input elements

133
00:06:44,340 --> 00:06:46,110
‫are now controlled elements

134
00:06:46,110 --> 00:06:49,770
‫for the same reason that we already saw before.

135
00:06:49,770 --> 00:06:52,320
‫So we have a piece of state

136
00:06:52,320 --> 00:06:54,630
‫and we then connect that piece of state,

137
00:06:54,630 --> 00:06:58,200
‫for example here, the step, with the input element.

138
00:06:58,200 --> 00:07:01,860
‫So we force this input field to take the value

139
00:07:01,860 --> 00:07:04,200
‫of the step piece of state.

140
00:07:04,200 --> 00:07:06,720
‫But that alone is of course not enough

141
00:07:06,720 --> 00:07:09,750
‫because with that, we would not be able to then change

142
00:07:09,750 --> 00:07:10,980
‫here the value.

143
00:07:10,980 --> 00:07:13,980
‫And so we then need to handle the event

144
00:07:13,980 --> 00:07:16,860
‫of actually trying to change,

145
00:07:16,860 --> 00:07:18,990
‫so of sliding here basically,

146
00:07:18,990 --> 00:07:22,320
‫so each time we slide the change event is fired off.

147
00:07:22,320 --> 00:07:24,210
‫And so then each time that happens,

148
00:07:24,210 --> 00:07:25,830
‫we want to set a step

149
00:07:25,830 --> 00:07:29,610
‫with the current value of the element.

150
00:07:29,610 --> 00:07:31,893
‫So that's e.target.value.

151
00:07:33,600 --> 00:07:37,440
‫Nice. And finally, the only thing that's missing

152
00:07:37,440 --> 00:07:40,563
‫is that reset, so that button right here.

153
00:07:41,689 --> 00:07:46,173
‫So let's then create a button down here.

154
00:07:47,550 --> 00:07:50,913
‫Let's create another div where we place that button into.

155
00:07:52,470 --> 00:07:54,843
‫So Reset, close that,

156
00:07:55,770 --> 00:07:56,883
‫and close the div.

157
00:07:58,800 --> 00:08:01,770
‫So we want something to happen on the click,

158
00:08:01,770 --> 00:08:04,320
‫so we use the onClick prop.

159
00:08:04,320 --> 00:08:08,130
‫And now here, let's actually do this as a separate function

160
00:08:08,130 --> 00:08:11,673
‫because here we will need to set two pieces of state.

161
00:08:12,660 --> 00:08:14,623
‫So let's call this handleReset.

162
00:08:16,800 --> 00:08:19,800
‫Now that does of course not exist

163
00:08:19,800 --> 00:08:21,393
‫so we get this complaint,

164
00:08:23,310 --> 00:08:27,180
‫so let's fix that handleReset.

165
00:08:27,180 --> 00:08:29,280
‫And so what's going to happen here?

166
00:08:29,280 --> 00:08:32,400
‫Well, all we have to do is to set these two

167
00:08:32,400 --> 00:08:36,840
‫back to their initial state using their setter functions.

168
00:08:36,840 --> 00:08:39,326
‫So, setCount will go back to 0,

169
00:08:39,326 --> 00:08:41,840
‫and the step will go back to 1.

170
00:08:44,700 --> 00:08:48,690
‫So, yeah, that works.

171
00:08:48,690 --> 00:08:50,940
‫The only thing that's different between

172
00:08:50,940 --> 00:08:52,530
‫the demo that I showed you

173
00:08:52,530 --> 00:08:55,320
‫is that we should not display this Reset button

174
00:08:55,320 --> 00:08:57,483
‫when there's actually nothing to reset.

175
00:08:59,040 --> 00:09:01,830
‫So basically, what we want to do

176
00:09:01,830 --> 00:09:05,040
‫is to conditionally render this part here.

177
00:09:05,040 --> 00:09:08,760
‫So let's wrap it into a JavaScript block.

178
00:09:08,760 --> 00:09:09,840
‫And then we can say,

179
00:09:09,840 --> 00:09:14,103
‫if count is equal to zero,

180
00:09:15,300 --> 00:09:16,960
‫or if step

181
00:09:20,040 --> 00:09:23,640
‫is different than one.

182
00:09:23,640 --> 00:09:25,290
‫So count different from 0,

183
00:09:25,290 --> 00:09:27,570
‫or step different from 1.

184
00:09:27,570 --> 00:09:29,850
‫So 0 is the default for count

185
00:09:29,850 --> 00:09:32,130
‫and 1 is the default for step.

186
00:09:32,130 --> 00:09:34,860
‫And so if one of these defaults is different,

187
00:09:34,860 --> 00:09:38,010
‫then we want to conditionally render this part.

188
00:09:38,010 --> 00:09:40,650
‫So for that, we can again use the end operator,

189
00:09:40,650 --> 00:09:42,750
‫or maybe just, why not,

190
00:09:42,750 --> 00:09:44,823
‫lets this time use the ternary operator.

191
00:09:45,750 --> 00:09:46,773
‫So in this case,

192
00:09:47,850 --> 00:09:51,063
‫maybe we should just put a parenthesis around this.

193
00:09:52,170 --> 00:09:54,180
‫So just to make sure that this is one condition

194
00:09:54,180 --> 00:09:56,460
‫that gets evaluated first.

195
00:09:56,460 --> 00:09:59,850
‫So in this case, render this,

196
00:09:59,850 --> 00:10:02,973
‫and else, render nothing.

197
00:10:04,620 --> 00:10:05,670
‫All right.

198
00:10:05,670 --> 00:10:08,400
‫So as soon as we change this, we get a button,

199
00:10:08,400 --> 00:10:11,133
‫or as soon as we change this, the same.

200
00:10:12,000 --> 00:10:15,480
‫Beautiful. So that's exactly what we wanted to build.

201
00:10:15,480 --> 00:10:18,000
‫And so we are finished with the challenge

202
00:10:18,000 --> 00:10:20,640
‫and we are finished with the section.

203
00:10:20,640 --> 00:10:22,650
‫And so let's waste no time

204
00:10:22,650 --> 00:10:25,500
‫and let's keep working on the far away list

205
00:10:25,500 --> 00:10:28,593
‫right in the next lecture of the next section.