Para practicar el estado un poco más,
implementemos ahora la funcionalidad de abrir y cerrar
para nuestro componente.
Entonces, mirando la demostración aquí,
lo que queremos implementar ahora es esta funcionalidad
que cuando hagamos clic en este botón aquí,
entonces esta parte del componente desaparece,
y luego, cuando volvemos a hacer clic en él, vuelve.
Como esto es algo que cambia en la pantalla,
eso significa que necesitamos un nuevo Estado.
Primero comentemos este otro estado que tenemos aquí.
para que lo creemos para nuestro experimento.
No lo borraré por completo
sólo para mantenerlo como referencia aquí.
Pero de todos modos, creemos ahora un nuevo Estado.
Entonces esto se llamará isOpen,
y luego nuevamente la convención para el colocador
es llamarlo conjunto
y luego el nombre del estado, entonces setIsOpen,
tan igual usoEstado,
y por defecto, nuestro componente debería estar abierto,
por lo tanto, pasamos el valor de verdadero.
Entonces isOpen comienza como verdadero,
y ese es nuestro valor de estado predeterminado
para el estado isOpen.
Esa es la primera parte del uso del estado.
La segunda es usar la variable de estado.
en nuestro código.
Entonces, ¿qué queremos lograr con esta variable de estado?
Bueno, siempre que sea cierto, queremos que esto se demuestre aquí.
Y si es falso, no queremos que esto se demuestre.
Y siempre que sea falso, no queremos que esto se demuestre.
Entonces, lo que esto significa es que necesitamos renderizado condicional.
Así que hagamos eso.
Ahora no podemos terminar todo esto aquí.
en modo JavaScript ahora,
pero sigamos intentándolo.
Así que lo seleccioné todo.
y luego abriré las llaves
para ingresar al modo JavaScript.
Pero esto realmente no funcionará.
porque esto sólo se puede hacer dentro de algún elemento.
Entonces, por ejemplo, necesitaríamos un div aquí.
Y entonces aquí, ciérralo.
Sin embargo, React todavía no está contento.
¿entonces que tenemos aqui?
Ah, la prueba no está definida.
Eso es porque acabamos de eliminar
este pedazo de estado aquí de antes,
Así que comentemos esto y guárdelo.
Y nuevamente, primero necesitábamos crear
este elemento div aquí afuera,
básicamente para iniciar nuestro JSX.
Y entonces dentro de ese JSX
Es donde podemos ingresar al modo JavaScript.
Y necesitamos este modo JavaScript aquí.
porque ahora usaremos nuestro isOpen.
Y luego, en cuanto a la representación condicional,
simplemente usemos el operador final,
dale un save y listo.
Entonces, siempre que esto sea cierto,
entonces esta segunda parte aquí será devuelta.
Y cuando sea falso, solo se devolverá falso.
Eso es justo lo que aprendimos en la sección anterior.
está bien.
Ahora como esto es cierto, aquí no pasa nada,
entonces esto todavía es visible, pero si lo estableciésemos en falso,
entonces nuestro componente debería desaparecer.
Sí, entonces ya no está.
Y por lo tanto lo que esto significa es que está funcionando.
Así que volvamos a ponerlo en verdad,
y con esto terminamos la segunda parte de usar state.
Y ahora la tercera parte del uso del estado.
es realmente actualizar el estado.
Para eso, necesitamos nuestro botón aquí en la esquina.
y para eso necesitamos escribir más JSX.
Así que hagámoslo aquí.
Entonces botón con un nombre de clase de cierre
y luego aquí, podemos usar una entidad HTML de tiempos
que básicamente escribirá una X.
aquí vamos.
Y ahora necesitamos nuestro controlador de eventos.
Entonces, para eso, usemos nuevamente el accesorio onClick,
para adjuntar directamente el controlador de eventos a este elemento.
Y esta vez solo para mostrarte,
Déjame crear una función en línea aquí.
Entonces, en lugar de crear una función de control aquí
como estos dos,
Ahora definiré la función directamente aquí.
Sólo para mostrarles que a veces esto también es lo que hacemos.
especialmente cuando tenemos una lógica muy simple.
Entonces necesitamos crear una nueva función,
¿Y ahora qué queremos hacer aquí?
Bueno, queremos actualizar el estado isOpen.
Entonces el conjunto está abierto,
y luego nuevamente, tenemos que pasar al nuevo estado,
entonces el estado actualizado.
¿Y qué debería ser eso?
Bueno, siempre debería ser lo contrario del estado actual.
Entonces, si esta apertura es verdadera, debería volverse falsa,
y si es falso, debería convertirse en verdad.
Y la forma en que lo hacemos es usando el operador not.
De nuevo, eso es solo JavaScript común y estándar.
Bien, y esto ya debería funcionar.
Así que recarguemos aquí para deshacernos de ese error.
Y sí, hermosa.
Eso está funcionando bien.
Entonces nuestra vista se actualiza y se vuelve a renderizar.
Y luego, después de volver a renderizar,
isOpen ya no es cierto,
pero es falso.
Por lo tanto, entonces toda esta parte aquí de JSX
ya no se renderiza, ¿verdad?
Pero luego, cuando volvemos a hacer clic,
esta función aquí se llama nuevamente,
que luego cambiará isOpen al otro estado.
Entonces de falso a verdadero, en este caso.
Y así actualizar este pedazo de estado.
Luego hará que React vuelva a renderizar el componente.
Esta vez con isOpen to true.
Entonces, cuando React ve este fragmento de código, isOpen es verdadero,
y por lo tanto se devuelve este JSX.
Y así con esto,
Actualizamos la vista aquí mismo en nuestra aplicación.
excelente.
Ahora lo que quiero que notes sobre esto es que...
Cambiemos el estado aquí.
Nuevamente, con esto aquí, cambiamos el estado del paso,
que ahora mismo está en el número 2.
Y ahora, si alternamos este estado,
Entonces, si cambiamos este estado y lo volvemos a cambiar,
Verás que React efectivamente recordó el estado del paso.
a pesar de que volvimos a renderizar este componente varias veces
en el medio, ¿no?
Entonces, si lo configuramos en 3 y luego otra vez,
Puedo abrir y puedo cerrar, lo que significa que este componente,
entonces esta vista aquí se ha reordenado dos veces,
todavía recordará este otro pedazo de estado.
Entonces el 3 todavía está aquí.
Y por eso decimos
ese estado es como un recuerdo del componente.
Puede retener esta información a lo largo del tiempo.
a pesar de que lo renderizamos y volvemos a renderizar una y otra vez.
excelente.
Así que con esto espero que empieces a ver.
cómo podemos usar el estado en diferentes situaciones
y para diferentes cosas en la práctica.
Ahora, sólo una pequeña cosa que podríamos cambiar aquí:
y esto no tiene nada que ver con el estado,
es que en realidad no queremos volver
Sólo un elemento aquí.
Entonces queremos devolver básicamente ambos,
esta parte aquí y el botón.
Y entonces esto significa
que este es un gran caso de uso para un fragmento de React aquí.
Entonces, antes de hacer eso, simplemente inspeccionemos.
Y así, efectivamente, tenemos nuestra raíz
que es básicamente todo,
Entonces toda la aplicación.
Y luego ahí tenemos este div, que es este.
Pero nuevamente, digamos que no queremos eso.
Digamos que solo queremos tener el botón
y luego estos pasos div.
Así que eliminemos esto de aquí y de aquí.
Y ahora tenemos que recordar un fragmento.
Esa es como la raíz de este elemento JSX aquí.
que luego desaparecerá en el DOM.
Entonces, si echamos un vistazo ahora,
entonces solo nos queda este botón y el paso div.
De nuevo, siempre que estés en una situación como ésta,
Entonces, ¿necesitas un fragmento de JSX para devolver dos elementos?
entonces el fragmento es genial para eso.