De acuerdo con mi experiencia,
No es muy difícil entender cómo funciona el estado en React.
Pero en realidad puede ser bastante complicado.
para entender cómo usarlo exactamente
en la práctica en diferentes situaciones.
Pero la cuestión es que esta es la habilidad número uno.
que necesitas tener como desarrollador de React.
Y es por eso que decidí crear este ejercicio extra.
que vamos a construir juntos ahora
para darte más situaciones
y más oportunidades para practicar.
Entonces vamos.
Y aquí está el ejercicio que vamos a construir.
Y en realidad es incluso un proyecto pequeño.
Entonces este es un proyecto de tarjetas didácticas.
donde una tarjeta didáctica es básicamente una pregunta en un lado
y luego, cuando haces clic en él,
obtienes la respuesta del otro lado.
Así que imagina que puedes rotar cada una de estas cartas aquí,
que es lo que mucha gente utiliza para estudiar.
Entonces, si hago clic aquí ahora nuevamente,
entonces básicamente girará la tarjeta nuevamente.
Si hago clic aquí, se abre este.
Y mientras esto está abierto y hago clic en otro,
luego ves que uno cierra y este se abre.
está bien.
Este será un ejercicio pequeño y divertido.
lo cual quizás te parezca muy complejo ahora mismo,
pero en realidad todo lo que necesitamos es una parte del estado
para controlar todo esto.
Ahora agregué un archivo de inicio al enlace de esta conferencia.
Así que ese es este código sandbox aquí.
Y aquí ya tenemos un array con todas las preguntas.
Y una vez más, se trata de una serie de objetos.
está bien.
Y entonces, ¿qué vamos a construir?
Son estas tarjetas didácticas de aquí.
Entonces todo lo que tienes que hacer es bifurcar ahora con este código sandbox
o también puedes copiar y pegar este código completo
en su propio editor de código en su computadora.
Entonces esa es tu elección.
Pero lo que haré ahora es bifurcar esto,
que básicamente creará una copia en mi propio código Sandbox.
está bien.
Y entonces comencemos.
Y la primera parte es realmente renderizar
estas diferentes flashcards como esta.
Básicamente solo la parte delantera.
que contiene todas las preguntas.
Así verás que cada uno tiene una idea,
una pregunta y una respuesta.
Pero claro, por defecto, sólo son visibles las preguntas.
Entonces ya sabemos cómo renderizar listas.
Simplemente ingresamos al modo JavaScript,
luego tomamos nuestra matriz de preguntas y la mapeamos.
Entonces cada una de ellas es una pregunta.
Y luego aquí podemos renderizar algo de JSX.
Ahora, muchas veces lo que hacemos aquí
es crear un componente extra.
Así como lo hicimos en la aplicación de lista de viajes lejanos
que estamos construyendo actualmente, pero no es necesario.
Entonces también podemos devolver algo de JSX aquí.
Y eso es lo que vamos a hacer ahora.
Entonces solo otro div.
Y luego ahí un párrafo con la pregunta.
Entonces esa es una pregunta, una pregunta en realidad, y eso es todo.
Cierra eso y cierra el div también.
y ahí lo tenemos.
Ahora lo que falta aquí es el nombre de la clase de...
tarjetas didácticas.
Como puede ver, ya creé algo de CSS.
Entonces, si copias el código en tu propia computadora,
luego asegúrese de copiar también el contenido de este style.css.
Bien, ahora vemos que aquí tenemos algunos problemas.
que están relacionados con la clave.
Exacto, entonces cada uno necesita una clave única.
Y entonces, bueno, podemos poner eso aquí.
Entonces clave, y luego usemos question.id
porque estos son valores únicos,
y como sabes, cada elemento que representamos aquí
dentro del mapa, por lo que, como lista, necesita una clave única.
Entonces, si recargo ahora, estos errores desaparecerán.
Bien, ahora tenemos todas nuestras partes estáticas construidas.
Ahora lo que tenemos que hacer es que algo suceda.
Cada vez que hacemos clic en uno de estos componentes aquí,
o en realidad, cada uno de estos elementos.
Entonces, ¿cómo vamos a hacer esto?
Bueno, como dije inicialmente,
Todo lo que necesitamos es en realidad una parte del Estado.
y ese pedazo de estado hará un seguimiento
de qué ID de pregunta es actualmente la pregunta activa.
Y si eso suena confuso, escribamos un código.
Así que llamemos a esto el ID seleccionado.
y luego establecerSelectedId.
usoEstado.
Y luego, aquí querremos comenzar con nulo,
porque por defecto no queremos ninguna de las preguntas
estar abierto al principio,
para ser seleccionado al principio.
Y para eso sirve null.
Entonces nulo es básicamente nada.
Ahora aquí necesitamos importar useState desde React.
está bien.
Y ahora recordemos los tres pasos para usar state,
al que me gusta volver siempre
porque creo que esto lo hace un poco más útil
para entender cómo debemos abordar esto.
Entonces el primer paso es definir la variable de estado,
lo cual ya hicimos.
El segundo es luego usar esa variable de estado,
y tercero es actualizarlo.
En cuanto al segundo punto, hagámoslo ahora.
Entonces usemos la ID seleccionada aquí para algo.
Pero bueno esta vez esto es un poco complicado ¿no?
¿Para qué necesitamos realmente la identificación seleccionada?
Bueno, tal vez lo hagamos más fácil.
en lugar de usar null aquí, use uno de estos.
Entonces una de las identificaciones reales.
Entonces 9103.
Entonces si este es el estado.
Entonces imaginemos que acabamos de hacer clic en este de aquí,
cómo dar memoria a los componentes.
Digamos que acabamos de hacer clic aquí.
y para que este sea entonces el estado.
Entonces, ¿cómo queremos utilizar este estado?
Bueno, básicamente aquí, en lugar de mostrar la pregunta,
queremos mostrar la respuesta.
Entonces podemos hacer eso.
Podemos decir que question.id es igual al selectedId.
y si es así, muestra pregunta.respuesta.
Y si no, pues claro la pregunta.pregunta.
Y ahora aquí, esta vez obtuvimos la respuesta.
Entonces ese es el gancho useState.
Y eso ya está funcionando.
Así que hagamos lo mismo con el estilo porque aquí,
En realidad esto se ve así con este fondo rojo.
y entonces podemos usar una clase que creé para eso
y edite aquí a este div.
Entonces hagamos algo similar.
Entonces className, ingresa al modo JavaScript,
y luego hacemos lo mismo.
Entonces, si el question.id actual es igual al selectedId
entonces aquí se debe seleccionar el nombre de la clase.
Y si no, pues nada.
Y ahí vamos.
tan hermoso.
Sólo asegúrate de que realmente entiendes
que esta pasando aqui.
Entonces, mientras recorremos esta matriz aquí,
cada uno de estos elementos es uno de estos divs, ¿verdad?
Y en cada uno de estos divs tenemos acceso
al objeto de la pregunta actual,
y luego cada uno de ellos tiene una identificación.
Entonces, lo que podemos hacer es comparar esa identificación.
con el DNI seleccionado.
Entonces el que hemos seleccionado actualmente.
Y si eso es lo mismo, entonces bueno, es justo lo que
hemos escrito aquí.
Entonces, si es la pregunta seleccionada,
entonces si el ID seleccionado es igual al
que está en el objeto, luego simplemente muestre la respuesta.
Y en caso contrario, en todos los demás casos,
Bueno, entonces muestra la pregunta en sí.
Entonces no es la respuesta.
está bien.
Y ahora, volvamos a establecerlo en nulo.
Y ahora, todo lo que tenemos que hacer es establecer el estado.
Entonces ese es el tercer paso.
Entonces, ¿cuándo queremos actualizar el estado?
Es cada vez que hacemos clic aquí,
entonces en uno de estos divs.
Y ahí es donde colocamos el controlador onClick.
Como ves, ni siquiera tiene que ser un botón.
o algo así.
¿bueno? Y ahora lo que vamos a hacer es
crea una función aquí.
Solo para hacer que nuestro código sea un poco más fácil de entender.
Entonces llamémoslo manejar clic.
Por ahora solo el nombre de la función.
Entonces aquí tenemos que pasar esa función.
¿bien? Sin embargo, eso no es realmente suficiente.
porque bueno, aquí ahora llamaremos a establecer ID seleccionado,
pero como dice el nombre
ahora necesitamos el ID de la pregunta que
debería convertirse en la pregunta seleccionada, ¿verdad?
Y entonces lo que esto significa es que esta función
necesita recibir esa identificación para que luego podamos configurarla aquí.
Entonces ahora necesitamos llamar a esta función de clic de manija.
Con eso lo haría.
Bastante simple question.id.
Pero no cometas el error de pensar
que esto se acabe.
Y de hecho React ya nos dio aquí un error.
Entonces recuerda que aquí tenemos que pasar.
en una función real y no en una llamada de función
como tenemos aquí.
Entonces esto es llamar al identificador, haga clic inmediatamente.
Eso no es lo que queremos.
Queremos pasar una función para que React pueda
luego llame a la función tan pronto como ocurra el evento.
Y la prueba ya debería ser suficiente, al menos por ahora.
¡Eso funcionó muy bien!
Y cuando hago clic en otro, por supuesto este
se convierte en el activo.
Y echemos un vistazo a las herramientas de desarrollo de React.
porque Code Sandbox en realidad también
Tiene las herramientas React integradas.
Entonces, cuando llegamos aquí a la aplicación, o en realidad a las tarjetas didácticas,
observe que el estado ahora es 9103,
que es exactamente esta idea.
Cuando hacemos clic aquí, se convierte en,
Eso debería haberse actualizado,
pero aparentemente no funciona tan bien.
Entonces sí, bueno tal vez, no importa,
cerremos esto de nuevo.
Lo que importa es que esté funcionando al menos en cierta medida.
porque mira lo que pasa cuando hago clic aquí nuevamente.
Entonces no pasa nada, claro, porque, bueno
porque aquí simplemente estamos pasando esa identificación
y luego configuramos esa ID como la ID seleccionada.
Tal como se esperaba.
Pero como vemos aquí, al hacer clic nuevamente
De hecho, vuelve a cerrar la tarjeta.
Entonces esta funcionalidad que ya tenemos de
cambiar entre tarjetas
pero cuando hacemos clic en él, aún no lo tenemos.
Así que hagamos eso.
Y no es demasiado difícil.
Básicamente lo que queremos hacer aquí es establecer esta ID.
basado en una condición.
Entonces queremos decir si el ID de la pregunta
es diferente del seleccionado actualmente
entonces el resultado aquí debería ser la identificación.
Y si no, entonces vuélvelo a ahora.
Ahora aquí hay algún problema.
Ah, sí, tengo uno igual de sobra.
está bien.
De nuevo, si el ID de la pregunta es diferente
desde la ID ya seleccionada, luego configure la ID.
Y ese es exactamente este comportamiento, ¿verdad?
Pero si no, básicamente si el ID de la pregunta
ya es igual al ID seleccionado
luego configúrelo de nuevo en nulo.
Y así, con nulo, ninguno de ellos estará activo.
Y sí, eso funciona y creo que también tiene sentido.
Así que este uso del estado aquí fue bastante
un poco diferente de lo que teníamos antes.
Y por eso decidí de nuevo
incluir este ejercicio aquí al final de esta sección.
Así que asegúrese de estudiar exactamente lo que está sucediendo aquí.
Y luego de eso, creo que estás listo.
para el desafío de codificación final de esta sección.