Concluyamos esta sección
continuando trabajando en el desafío del contador de fechas
que empezamos antes.
Entonces, en esta segunda parte del desafío,
Actualizaremos el contador de fechas que construimos antes.
Entonces, aún podemos hacer clic aquí en estos botones.
para avanzar en la fecha,
pero ahora también podemos ir directamente a una cita
definiendo un recuento aquí.
Entonces, por ejemplo, dentro de 1000 días es,
bueno, este de aquí,
o 10.000 o 100.000,
y puedes seguir como quieras.
Así que volvamos a ponerlo en 1.
Entonces esa es la mejora aquí para el contador,
y el paso también es diferente.
Entonces, en lugar de estos botones que teníamos antes
tan parecidos a estos,
Ahora tenemos este control deslizante.
Y ahora si hacemos clic aquí,
subimos este siete aquí,
pero el siete ahora se definió usando este bonito control deslizante.
Y este control deslizante es en realidad solo otro tipo de
elemento de entrada HTML,
pero te lo mostraré aquí en un minuto.
Por último, lo que también tenemos es que podemos resetear.
Entonces, cuando hacemos clic en Restablecer,
vuelve a 0 aquí y vuelve a 1 en el paso.
Y este botón sólo es visible
cuando uno de estos dos cambia.
Así que regresemos y hagamos eso.
Así que aquí todavía tengo que codificar del desafío anterior,
y lo que voy a hacer ahora es bifurcar esto.
Entonces esto básicamente creará una copia de esa otra,
y ahora puedo seguir escribiendo el código aquí
sin cambiar el inicial.
Entonces, lo que quería mostrarles rápidamente aquí es ese control deslizante.
Entonces, podemos usar la entrada.
Como dije, esto ahora es una entrada.
y el tipo es de rango.
Y luego establecemos un valor mínimo,
puedes configurarlo en 0,
y un valor máximo de 10.
vamos a ver.
Y ahí vamos.
Así que ahora, por supuesto, esto es un elemento incontrolado.
Entonces, en este momento, React no está a cargo.
de controlar este valor.
Y entonces, lo que debes hacer, como puedes imaginar,
ahora es hacer de este elemento de entrada un elemento controlado
y luego también este de aquí.
Entonces con esto practicarás lo que acabamos de aprender.
un poquito antes ¿no?
Y por si tienes alguna duda,
puedes volver a esa conferencia
y revisa el código que escribiste allí.
Entonces, déjame mostrarte aquí el resultado.
para que sepas lo que tienes que construir.
Buena suerte con este desafío.
Y te veré aquí de regreso en unos minutos una vez que estés listo.
Muy bien, ahora recarguemos rápidamente
Básicamente nuestro componente contador.
Así que la mayoría de las cosas en realidad no van a cambiar aquí.
Entonces ya tenemos el estado escalonado.
Todo lo que tenemos que hacer es conectarlo ahora.
lo mismo ocurre con este elemento de entrada.
Entonces el valor de este elemento debería ser, por supuesto,
controlado por ese estado de paso.
Y luego, necesitamos el controlador onChange.
justo como antes.
Entonces obtenemos el evento actual.
y luego establecemos el paso en función de ese evento,
entonces evento.objetivo.valor.
Y luego podemos deshacernos de este botón.
Y veamos.
Sí, eso ya funciona.
Y efectivamente, bueno,
Eso realmente no funciona, ¿verdad?
Entonces es sumar el 10 como una cadena.
Entonces tenemos un error en nuestro código.
Entonces el problema como puedes ver
es que este valor aquí se toma como una cadena.
Entonces ese es en realidad el problema que teníamos antes.
y que detectamos usando React DevTools.
Y de hecho, las DevTools también están disponibles aquí.
entonces podríamos ver lo mismo aquí.
Entonces el estado es 10,
entonces 10 es una cadena.
Entonces simplemente hacemos lo que hicimos antes,
que es convertir este valor a un número
antes de colocarlo en el estado.
Así que recarguemos eso aquí.
Tómate un tiempo,
y pongámoslo en algo.
Y eso está funcionando ahora.
Y ves aquí que tenemos,
Bueno, eso no es correcto por alguna razón.
pero lo que importa es que aquí realmente está funcionando.
Entonces, tal vez la integración aquí en CodeSandbox
no es tan bueno.
Pero sí, no importa,
lo que importa es que esta parte ya está funcionando.
Y ahora todo lo que tenemos que hacer es crear
un elemento de entrada aquí también.
Así que eso tampoco debería ser tan difícil.
Entonces ya no necesitamos este lapso,
pero en su lugar usaremos una entrada
del tipo texto,
el valor aquí es contar,
y luego en Cambiar.
Básicamente queremos casi lo mismo que antes.
Entonces obtenemos el evento actual.
y luego establecerCount,
y entonces esta vez no vamos a olvidar
la parte de conversión.
Entonces convertimos
a un número e.valor.objetivo.
Y ahora todo lo que tenemos que hacer
es cerrar este elemento,
dale una caja fuerte.
Y sí, todo esto me parece correcto.
vamos a ver.
Algo está pasando aquí,
Tal vez cerremos las herramientas de React.
Sí, de todos modos, recarguemos aquí solo para estar seguros.
Entonces esto funciona.
Y ahora, si ingresamos un valor aquí, sí, bien.
Así que eso es realmente lindo.
Entonces con esto, tenemos un poco más de control sobre el componente.
y podemos calcular fechas a partir de ahora, lo cual es bastante útil.
Pero sí, repasemos rápidamente lo que hicimos aquí.
Entonces estos dos elementos de entrada
ahora son elementos controlados
por el mismo motivo que ya vimos antes.
Entonces tenemos un pedazo de estado.
y luego conectamos ese pedazo de estado,
por ejemplo aquí, el paso, con el elemento de entrada.
Entonces forzamos este campo de entrada a tomar el valor.
del paso pieza de estado.
Pero eso por sí solo no es suficiente
porque con eso no podríamos luego cambiar
Aquí el valor.
Entonces necesitamos manejar el evento.
de intentar realmente cambiar,
así que de deslizarme aquí básicamente,
por lo que cada vez que deslizamos el evento de cambio se activa.
Y entonces cada vez que eso sucede,
queremos dar un paso
con el valor actual del elemento.
Entonces ese es el valor e.target.
lindo. Y finalmente lo único que falta
es ese reinicio, entonces ese botón de aquí.
Entonces creemos un botón aquí abajo.
Creemos otro div donde coloquemos ese botón.
Así que reinicie, ciérrelo,
y cerrar el div.
Entonces queremos que algo suceda al hacer clic,
entonces usamos el accesorio onClick.
Y ahora, hagamos esto como una función separada.
porque aquí necesitaremos establecer dos estados.
Así que llamemos a esto handleReset.
Eso por supuesto no existe.
entonces recibimos esta queja,
así que arreglemos ese handleReset.
¿Y entonces qué va a pasar aquí?
Bueno, todo lo que tenemos que hacer es configurar estos dos
volver a su estado inicial utilizando sus funciones de establecimiento.
Entonces, setCount volverá a 0,
y el paso volverá a 1.
Entonces, sí, eso funciona.
Lo único que es diferente entre
la demo que les mostré
es que no deberíamos mostrar este botón Reset
cuando en realidad no hay nada que restablecer.
Básicamente, lo que queremos hacer
es renderizar condicionalmente esta parte aquí.
Así que envolvámoslo en un bloque de JavaScript.
Y entonces podemos decir,
si el conteo es igual a cero,
o si paso
es diferente a uno.
Entonces cuenta diferente de 0,
o paso diferente del 1.
Entonces 0 es el valor predeterminado para el recuento.
y 1 es el valor predeterminado para el paso.
Y entonces, si uno de estos valores predeterminados es diferente,
entonces queremos renderizar condicionalmente esta parte.
Entonces, para eso, podemos usar nuevamente el operador final,
o tal vez simplemente, ¿por qué no?
esta vez usemos el operador ternario.
Entonces en este caso,
tal vez deberíamos poner esto entre paréntesis.
Así que sólo para asegurarnos de que esta sea una condición
eso se evalúa primero.
Entonces, en este caso, renderice esto,
y de lo contrario, no rinda nada.
está bien.
Tan pronto como cambiemos esto, obtenemos un botón,
o en cuanto cambiemos esto, igual.
hermoso. Eso es exactamente lo que queríamos construir.
Y así terminamos con el desafío.
y hemos terminado con la sección.
Y entonces no perdamos el tiempo
y sigamos trabajando en la lista lejana
justo en la siguiente conferencia de la siguiente sección.