1
00:00:01,110 --> 00:00:02,820
Concluyamos esta sección

2
00:00:02,820 --> 00:00:06,180
continuando trabajando en el desafío del contador de fechas

3
00:00:06,180 --> 00:00:07,683
que empezamos antes.

4
00:00:09,000 --> 00:00:11,700
Entonces, en esta segunda parte del desafío,

5
00:00:11,700 --> 00:00:15,930
Actualizaremos el contador de fechas que construimos antes.

6
00:00:15,930 --> 00:00:19,350
Entonces, aún podemos hacer clic aquí en estos botones.

7
00:00:19,350 --> 00:00:21,300
para avanzar en la fecha,

8
00:00:21,300 --> 00:00:24,690
pero ahora también podemos ir directamente a una cita

9
00:00:24,690 --> 00:00:27,330
definiendo un recuento aquí.

10
00:00:27,330 --> 00:00:30,326
Entonces, por ejemplo, dentro de 1000 días es,

11
00:00:30,326 --> 00:00:31,920
bueno, este de aquí,

12
00:00:31,920 --> 00:00:34,650
o 10.000 o 100.000,

13
00:00:34,650 --> 00:00:37,083
y puedes seguir como quieras.

14
00:00:38,880 --> 00:00:40,893
Así que volvamos a ponerlo en 1.

15
00:00:42,270 --> 00:00:45,000
Entonces esa es la mejora aquí para el contador,

16
00:00:45,000 --> 00:00:47,370
y el paso también es diferente.

17
00:00:47,370 --> 00:00:50,670
Entonces, en lugar de estos botones que teníamos antes

18
00:00:50,670 --> 00:00:52,110
tan parecidos a estos,

19
00:00:52,110 --> 00:00:54,150
Ahora tenemos este control deslizante.

20
00:00:54,150 --> 00:00:56,400
Y ahora si hacemos clic aquí,

21
00:00:56,400 --> 00:00:58,920
subimos este siete aquí,

22
00:00:58,920 --> 00:01:02,790
pero el siete ahora se definió usando este bonito control deslizante.

23
00:01:02,790 --> 00:01:06,450
Y este control deslizante es en realidad solo otro tipo de

24
00:01:06,450 --> 00:01:08,220
elemento de entrada HTML,

25
00:01:08,220 --> 00:01:10,770
pero te lo mostraré aquí en un minuto.

26
00:01:10,770 --> 00:01:14,640
Por último, lo que también tenemos es que podemos resetear.

27
00:01:14,640 --> 00:01:16,590
Entonces, cuando hacemos clic en Restablecer,

28
00:01:16,590 --> 00:01:19,950
vuelve a 0 aquí y vuelve a 1 en el paso.

29
00:01:19,950 --> 00:01:22,350
Y este botón sólo es visible

30
00:01:22,350 --> 00:01:24,123
cuando uno de estos dos cambia.

31
00:01:25,290 --> 00:01:29,148
Así que regresemos y hagamos eso.

32
00:01:29,148 --> 00:01:33,030
Así que aquí todavía tengo que codificar del desafío anterior,

33
00:01:33,030 --> 00:01:36,330
y lo que voy a hacer ahora es bifurcar esto.

34
00:01:36,330 --> 00:01:40,050
Entonces esto básicamente creará una copia de esa otra,

35
00:01:40,050 --> 00:01:42,840
y ahora puedo seguir escribiendo el código aquí

36
00:01:42,840 --> 00:01:45,390
sin cambiar el inicial.

37
00:01:45,390 --> 00:01:49,533
Entonces, lo que quería mostrarles rápidamente aquí es ese control deslizante.

38
00:01:51,030 --> 00:01:53,223
Entonces, podemos usar la entrada.

39
00:01:54,330 --> 00:01:56,370
Como dije, esto ahora es una entrada.

40
00:01:56,370 --> 00:02:00,450
y el tipo es de rango.

41
00:02:00,450 --> 00:02:02,973
Y luego establecemos un valor mínimo,

42
00:02:04,464 --> 00:02:07,080
puedes configurarlo en 0,

43
00:02:07,080 --> 00:02:09,543
y un valor máximo de 10.

44
00:02:11,670 --> 00:02:12,503
vamos a ver.

45
00:02:13,500 --> 00:02:14,763
Y ahí vamos.

46
00:02:15,960 --> 00:02:19,620
Así que ahora, por supuesto, esto es un elemento incontrolado.

47
00:02:19,620 --> 00:02:22,290
Entonces, en este momento, React no está a cargo.

48
00:02:22,290 --> 00:02:24,600
de controlar este valor.

49
00:02:24,600 --> 00:02:27,390
Y entonces, lo que debes hacer, como puedes imaginar,

50
00:02:27,390 --> 00:02:31,740
ahora es hacer de este elemento de entrada un elemento controlado

51
00:02:31,740 --> 00:02:34,080
y luego también este de aquí.

52
00:02:34,080 --> 00:02:37,020
Entonces con esto practicarás lo que acabamos de aprender.

53
00:02:37,020 --> 00:02:39,720
un poquito antes ¿no?

54
00:02:39,720 --> 00:02:41,490
Y por si tienes alguna duda,

55
00:02:41,490 --> 00:02:43,890
puedes volver a esa conferencia

56
00:02:43,890 --> 00:02:46,410
y revisa el código que escribiste allí.

57
00:02:46,410 --> 00:02:48,840
Entonces, déjame mostrarte aquí el resultado.

58
00:02:48,840 --> 00:02:50,640
para que sepas lo que tienes que construir.

59
00:02:50,640 --> 00:02:52,500
Buena suerte con este desafío.

60
00:02:52,500 --> 00:02:56,763
Y te veré aquí de regreso en unos minutos una vez que estés listo.

61
00:02:58,740 --> 00:03:02,340
Muy bien, ahora recarguemos rápidamente

62
00:03:02,340 --> 00:03:06,930
Básicamente nuestro componente contador.

63
00:03:06,930 --> 00:03:10,203
Así que la mayoría de las cosas en realidad no van a cambiar aquí.

64
00:03:11,100 --> 00:03:14,010
Entonces ya tenemos el estado escalonado.

65
00:03:14,010 --> 00:03:16,890
Todo lo que tenemos que hacer es conectarlo ahora.

66
00:03:16,890 --> 00:03:18,543
lo mismo ocurre con este elemento de entrada.

67
00:03:19,530 --> 00:03:23,370
Entonces el valor de este elemento debería ser, por supuesto,

68
00:03:23,370 --> 00:03:26,490
controlado por ese estado de paso.

69
00:03:26,490 --> 00:03:28,920
Y luego, necesitamos el controlador onChange.

70
00:03:28,920 --> 00:03:30,600
justo como antes.

71
00:03:30,600 --> 00:03:33,210
Entonces obtenemos el evento actual.

72
00:03:33,210 --> 00:03:37,200
y luego establecemos el paso en función de ese evento,

73
00:03:37,200 --> 00:03:41,130
entonces evento.objetivo.valor.

74
00:03:41,130 --> 00:03:44,973
Y luego podemos deshacernos de este botón.

75
00:03:47,271 --> 00:03:49,353
Y veamos.

76
00:03:50,670 --> 00:03:52,563
Sí, eso ya funciona.

77
00:03:53,535 --> 00:03:56,130
Y efectivamente, bueno,

78
00:03:56,130 --> 00:03:58,560
Eso realmente no funciona, ¿verdad?

79
00:03:58,560 --> 00:04:01,530
Entonces es sumar el 10 como una cadena.

80
00:04:01,530 --> 00:04:04,470
Entonces tenemos un error en nuestro código.

81
00:04:04,470 --> 00:04:07,020
Entonces el problema como puedes ver

82
00:04:07,020 --> 00:04:10,830
es que este valor aquí se toma como una cadena.

83
00:04:10,830 --> 00:04:13,290
Entonces ese es en realidad el problema que teníamos antes.

84
00:04:13,290 --> 00:04:16,890
y que detectamos usando React DevTools.

85
00:04:16,890 --> 00:04:20,490
Y de hecho, las DevTools también están disponibles aquí.

86
00:04:20,490 --> 00:04:23,460
entonces podríamos ver lo mismo aquí.

87
00:04:23,460 --> 00:04:25,860
Entonces el estado es 10,

88
00:04:25,860 --> 00:04:27,003
entonces 10 es una cadena.

89
00:04:28,410 --> 00:04:30,780
Entonces simplemente hacemos lo que hicimos antes,

90
00:04:30,780 --> 00:04:34,080
que es convertir este valor a un número

91
00:04:34,080 --> 00:04:37,496
antes de colocarlo en el estado.

92
00:04:37,496 --> 00:04:39,573
Así que recarguemos eso aquí.

93
00:04:41,520 --> 00:04:43,350
Tómate un tiempo,

94
00:04:43,350 --> 00:04:46,203
y pongámoslo en algo.

95
00:04:47,610 --> 00:04:49,350
Y eso está funcionando ahora.

96
00:04:49,350 --> 00:04:51,510
Y ves aquí que tenemos,

97
00:04:51,510 --> 00:04:55,770
Bueno, eso no es correcto por alguna razón.

98
00:04:55,770 --> 00:04:58,830
pero lo que importa es que aquí realmente está funcionando.

99
00:04:58,830 --> 00:05:01,740
Entonces, tal vez la integración aquí en CodeSandbox

100
00:05:01,740 --> 00:05:03,540
no es tan bueno.

101
00:05:03,540 --> 00:05:05,100
Pero sí, no importa,

102
00:05:05,100 --> 00:05:07,830
lo que importa es que esta parte ya está funcionando.

103
00:05:07,830 --> 00:05:10,350
Y ahora todo lo que tenemos que hacer es crear

104
00:05:10,350 --> 00:05:12,453
un elemento de entrada aquí también.

105
00:05:13,620 --> 00:05:17,280
Así que eso tampoco debería ser tan difícil.

106
00:05:17,280 --> 00:05:19,470
Entonces ya no necesitamos este lapso,

107
00:05:19,470 --> 00:05:21,940
pero en su lugar usaremos una entrada

108
00:05:24,510 --> 00:05:27,693
del tipo texto,

109
00:05:28,890 --> 00:05:32,460
el valor aquí es contar,

110
00:05:32,460 --> 00:05:33,783
y luego en Cambiar.

111
00:05:34,620 --> 00:05:37,953
Básicamente queremos casi lo mismo que antes.

112
00:05:39,750 --> 00:05:41,640
Entonces obtenemos el evento actual.

113
00:05:41,640 --> 00:05:43,023
y luego establecerCount,

114
00:05:44,610 --> 00:05:47,940
y entonces esta vez no vamos a olvidar

115
00:05:47,940 --> 00:05:49,083
la parte de conversión.

116
00:05:50,040 --> 00:05:51,000
Entonces convertimos

117
00:05:51,000 --> 00:05:55,593
a un número e.valor.objetivo.

118
00:05:56,610 --> 00:05:57,720
Y ahora todo lo que tenemos que hacer

119
00:05:57,720 --> 00:06:00,363
es cerrar este elemento,

120
00:06:01,530 --> 00:06:02,970
dale una caja fuerte.

121
00:06:02,970 --> 00:06:05,940
Y sí, todo esto me parece correcto.

122
00:06:05,940 --> 00:06:06,773
vamos a ver.

123
00:06:07,740 --> 00:06:08,640
Algo está pasando aquí,

124
00:06:08,640 --> 00:06:11,613
Tal vez cerremos las herramientas de React.

125
00:06:14,100 --> 00:06:17,373
Sí, de todos modos, recarguemos aquí solo para estar seguros.

126
00:06:20,460 --> 00:06:22,020
Entonces esto funciona.

127
00:06:22,020 --> 00:06:25,503
Y ahora, si ingresamos un valor aquí, sí, bien.

128
00:06:27,060 --> 00:06:29,610
Así que eso es realmente lindo.

129
00:06:29,610 --> 00:06:32,670
Entonces con esto, tenemos un poco más de control sobre el componente.

130
00:06:32,670 --> 00:06:36,723
y podemos calcular fechas a partir de ahora, lo cual es bastante útil.

131
00:06:38,550 --> 00:06:42,660
Pero sí, repasemos rápidamente lo que hicimos aquí.

132
00:06:42,660 --> 00:06:44,340
Entonces estos dos elementos de entrada

133
00:06:44,340 --> 00:06:46,110
ahora son elementos controlados

134
00:06:46,110 --> 00:06:49,770
por el mismo motivo que ya vimos antes.

135
00:06:49,770 --> 00:06:52,320
Entonces tenemos un pedazo de estado.

136
00:06:52,320 --> 00:06:54,630
y luego conectamos ese pedazo de estado,

137
00:06:54,630 --> 00:06:58,200
por ejemplo aquí, el paso, con el elemento de entrada.

138
00:06:58,200 --> 00:07:01,860
Entonces forzamos este campo de entrada a tomar el valor.

139
00:07:01,860 --> 00:07:04,200
del paso pieza de estado.

140
00:07:04,200 --> 00:07:06,720
Pero eso por sí solo no es suficiente

141
00:07:06,720 --> 00:07:09,750
porque con eso no podríamos luego cambiar

142
00:07:09,750 --> 00:07:10,980
Aquí el valor.

143
00:07:10,980 --> 00:07:13,980
Entonces necesitamos manejar el evento.

144
00:07:13,980 --> 00:07:16,860
de intentar realmente cambiar,

145
00:07:16,860 --> 00:07:18,990
así que de deslizarme aquí básicamente,

146
00:07:18,990 --> 00:07:22,320
por lo que cada vez que deslizamos el evento de cambio se activa.

147
00:07:22,320 --> 00:07:24,210
Y entonces cada vez que eso sucede,

148
00:07:24,210 --> 00:07:25,830
queremos dar un paso

149
00:07:25,830 --> 00:07:29,610
con el valor actual del elemento.

150
00:07:29,610 --> 00:07:31,893
Entonces ese es el valor e.target.

151
00:07:33,600 --> 00:07:37,440
lindo. Y finalmente lo único que falta

152
00:07:37,440 --> 00:07:40,563
es ese reinicio, entonces ese botón de aquí.

153
00:07:41,689 --> 00:07:46,173
Entonces creemos un botón aquí abajo.

154
00:07:47,550 --> 00:07:50,913
Creemos otro div donde coloquemos ese botón.

155
00:07:52,470 --> 00:07:54,843
Así que reinicie, ciérrelo,

156
00:07:55,770 --> 00:07:56,883
y cerrar el div.

157
00:07:58,800 --> 00:08:01,770
Entonces queremos que algo suceda al hacer clic,

158
00:08:01,770 --> 00:08:04,320
entonces usamos el accesorio onClick.

159
00:08:04,320 --> 00:08:08,130
Y ahora, hagamos esto como una función separada.

160
00:08:08,130 --> 00:08:11,673
porque aquí necesitaremos establecer dos estados.

161
00:08:12,660 --> 00:08:14,623
Así que llamemos a esto handleReset.

162
00:08:16,800 --> 00:08:19,800
Eso por supuesto no existe.

163
00:08:19,800 --> 00:08:21,393
entonces recibimos esta queja,

164
00:08:23,310 --> 00:08:27,180
así que arreglemos ese handleReset.

165
00:08:27,180 --> 00:08:29,280
¿Y entonces qué va a pasar aquí?

166
00:08:29,280 --> 00:08:32,400
Bueno, todo lo que tenemos que hacer es configurar estos dos

167
00:08:32,400 --> 00:08:36,840
volver a su estado inicial utilizando sus funciones de establecimiento.

168
00:08:36,840 --> 00:08:39,326
Entonces, setCount volverá a 0,

169
00:08:39,326 --> 00:08:41,840
y el paso volverá a 1.

170
00:08:44,700 --> 00:08:48,690
Entonces, sí, eso funciona.

171
00:08:48,690 --> 00:08:50,940
Lo único que es diferente entre

172
00:08:50,940 --> 00:08:52,530
la demo que les mostré

173
00:08:52,530 --> 00:08:55,320
es que no deberíamos mostrar este botón Reset

174
00:08:55,320 --> 00:08:57,483
cuando en realidad no hay nada que restablecer.

175
00:08:59,040 --> 00:09:01,830
Básicamente, lo que queremos hacer

176
00:09:01,830 --> 00:09:05,040
es renderizar condicionalmente esta parte aquí.

177
00:09:05,040 --> 00:09:08,760
Así que envolvámoslo en un bloque de JavaScript.

178
00:09:08,760 --> 00:09:09,840
Y entonces podemos decir,

179
00:09:09,840 --> 00:09:14,103
si el conteo es igual a cero,

180
00:09:15,300 --> 00:09:16,960
o si paso

181
00:09:20,040 --> 00:09:23,640
es diferente a uno.

182
00:09:23,640 --> 00:09:25,290
Entonces cuenta diferente de 0,

183
00:09:25,290 --> 00:09:27,570
o paso diferente del 1.

184
00:09:27,570 --> 00:09:29,850
Entonces 0 es el valor predeterminado para el recuento.

185
00:09:29,850 --> 00:09:32,130
y 1 es el valor predeterminado para el paso.

186
00:09:32,130 --> 00:09:34,860
Y entonces, si uno de estos valores predeterminados es diferente,

187
00:09:34,860 --> 00:09:38,010
entonces queremos renderizar condicionalmente esta parte.

188
00:09:38,010 --> 00:09:40,650
Entonces, para eso, podemos usar nuevamente el operador final,

189
00:09:40,650 --> 00:09:42,750
o tal vez simplemente, ¿por qué no?

190
00:09:42,750 --> 00:09:44,823
esta vez usemos el operador ternario.

191
00:09:45,750 --> 00:09:46,773
Entonces en este caso,

192
00:09:47,850 --> 00:09:51,063
tal vez deberíamos poner esto entre paréntesis.

193
00:09:52,170 --> 00:09:54,180
Así que sólo para asegurarnos de que esta sea una condición

194
00:09:54,180 --> 00:09:56,460
eso se evalúa primero.

195
00:09:56,460 --> 00:09:59,850
Entonces, en este caso, renderice esto,

196
00:09:59,850 --> 00:10:02,973
y de lo contrario, no rinda nada.

197
00:10:04,620 --> 00:10:05,670
está bien.

198
00:10:05,670 --> 00:10:08,400
Tan pronto como cambiemos esto, obtenemos un botón,

199
00:10:08,400 --> 00:10:11,133
o en cuanto cambiemos esto, igual.

200
00:10:12,000 --> 00:10:15,480
hermoso. Eso es exactamente lo que queríamos construir.

201
00:10:15,480 --> 00:10:18,000
Y así terminamos con el desafío.

202
00:10:18,000 --> 00:10:20,640
y hemos terminado con la sección.

203
00:10:20,640 --> 00:10:22,650
Y entonces no perdamos el tiempo

204
00:10:22,650 --> 00:10:25,500
y sigamos trabajando en la lista lejana

205
00:10:25,500 --> 00:10:28,593
justo en la siguiente conferencia de la siguiente sección.