1
00:00:01,050 --> 00:00:02,520
De acuerdo con mi experiencia,

2
00:00:02,520 --> 00:00:07,520
No es muy difícil entender cómo funciona el estado en React.

3
00:00:07,620 --> 00:00:10,320
Pero en realidad puede ser bastante complicado.

4
00:00:10,320 --> 00:00:12,570
para entender cómo usarlo exactamente

5
00:00:12,570 --> 00:00:15,450
en la práctica en diferentes situaciones.

6
00:00:15,450 --> 00:00:19,470
Pero la cuestión es que esta es la habilidad número uno.

7
00:00:19,470 --> 00:00:22,170
que necesitas tener como desarrollador de React.

8
00:00:22,170 --> 00:00:26,940
Y es por eso que decidí crear este ejercicio extra.

9
00:00:26,940 --> 00:00:28,860
que vamos a construir juntos ahora

10
00:00:28,860 --> 00:00:30,750
para darte más situaciones

11
00:00:30,750 --> 00:00:33,720
y más oportunidades para practicar.

12
00:00:33,720 --> 00:00:35,433
Entonces vamos.

13
00:00:36,750 --> 00:00:40,050
Y aquí está el ejercicio que vamos a construir.

14
00:00:40,050 --> 00:00:42,780
Y en realidad es incluso un proyecto pequeño.

15
00:00:42,780 --> 00:00:45,480
Entonces este es un proyecto de tarjetas didácticas.

16
00:00:45,480 --> 00:00:49,440
donde una tarjeta didáctica es básicamente una pregunta en un lado

17
00:00:49,440 --> 00:00:50,760
y luego, cuando haces clic en él,

18
00:00:50,760 --> 00:00:53,250
obtienes la respuesta del otro lado.

19
00:00:53,250 --> 00:00:57,300
Así que imagina que puedes rotar cada una de estas cartas aquí,

20
00:00:57,300 --> 00:01:00,393
que es lo que mucha gente utiliza para estudiar.

21
00:01:01,260 --> 00:01:02,940
Entonces, si hago clic aquí ahora nuevamente,

22
00:01:02,940 --> 00:01:06,240
entonces básicamente girará la tarjeta nuevamente.

23
00:01:06,240 --> 00:01:08,730
Si hago clic aquí, se abre este.

24
00:01:08,730 --> 00:01:11,880
Y mientras esto está abierto y hago clic en otro,

25
00:01:11,880 --> 00:01:14,673
luego ves que uno cierra y este se abre.

26
00:01:15,630 --> 00:01:16,620
está bien.

27
00:01:16,620 --> 00:01:19,740
Este será un ejercicio pequeño y divertido.

28
00:01:19,740 --> 00:01:23,190
lo cual quizás te parezca muy complejo ahora mismo,

29
00:01:23,190 --> 00:01:26,550
pero en realidad todo lo que necesitamos es una parte del estado

30
00:01:26,550 --> 00:01:28,530
para controlar todo esto.

31
00:01:28,530 --> 00:01:32,670
Ahora agregué un archivo de inicio al enlace de esta conferencia.

32
00:01:32,670 --> 00:01:35,310
Así que ese es este código sandbox aquí.

33
00:01:35,310 --> 00:01:39,630
Y aquí ya tenemos un array con todas las preguntas.

34
00:01:39,630 --> 00:01:43,023
Y una vez más, se trata de una serie de objetos.

35
00:01:44,220 --> 00:01:45,053
está bien.

36
00:01:45,053 --> 00:01:46,200
Y entonces, ¿qué vamos a construir?

37
00:01:46,200 --> 00:01:48,840
Son estas tarjetas didácticas de aquí.

38
00:01:48,840 --> 00:01:53,130
Entonces todo lo que tienes que hacer es bifurcar ahora con este código sandbox

39
00:01:53,130 --> 00:01:56,970
o también puedes copiar y pegar este código completo

40
00:01:56,970 --> 00:02:00,510
en su propio editor de código en su computadora.

41
00:02:00,510 --> 00:02:02,100
Entonces esa es tu elección.

42
00:02:02,100 --> 00:02:04,530
Pero lo que haré ahora es bifurcar esto,

43
00:02:04,530 --> 00:02:08,493
que básicamente creará una copia en mi propio código Sandbox.

44
00:02:09,870 --> 00:02:10,703
está bien.

45
00:02:10,703 --> 00:02:13,020
Y entonces comencemos.

46
00:02:13,020 --> 00:02:15,810
Y la primera parte es realmente renderizar

47
00:02:15,810 --> 00:02:19,530
estas diferentes flashcards como esta.

48
00:02:19,530 --> 00:02:21,690
Básicamente solo la parte delantera.

49
00:02:21,690 --> 00:02:24,450
que contiene todas las preguntas.

50
00:02:24,450 --> 00:02:26,970
Así verás que cada uno tiene una idea,

51
00:02:26,970 --> 00:02:29,160
una pregunta y una respuesta.

52
00:02:29,160 --> 00:02:32,373
Pero claro, por defecto, sólo son visibles las preguntas.

53
00:02:34,140 --> 00:02:36,843
Entonces ya sabemos cómo renderizar listas.

54
00:02:37,800 --> 00:02:39,630
Simplemente ingresamos al modo JavaScript,

55
00:02:39,630 --> 00:02:44,460
luego tomamos nuestra matriz de preguntas y la mapeamos.

56
00:02:44,460 --> 00:02:46,713
Entonces cada una de ellas es una pregunta.

57
00:02:48,030 --> 00:02:50,910
Y luego aquí podemos renderizar algo de JSX.

58
00:02:50,910 --> 00:02:52,680
Ahora, muchas veces lo que hacemos aquí

59
00:02:52,680 --> 00:02:54,840
es crear un componente extra.

60
00:02:54,840 --> 00:02:58,470
Así como lo hicimos en la aplicación de lista de viajes lejanos

61
00:02:58,470 --> 00:03:01,560
que estamos construyendo actualmente, pero no es necesario.

62
00:03:01,560 --> 00:03:05,520
Entonces también podemos devolver algo de JSX aquí.

63
00:03:05,520 --> 00:03:07,860
Y eso es lo que vamos a hacer ahora.

64
00:03:07,860 --> 00:03:09,333
Entonces solo otro div.

65
00:03:10,890 --> 00:03:15,630
Y luego ahí un párrafo con la pregunta.

66
00:03:15,630 --> 00:03:20,630
Entonces esa es una pregunta, una pregunta en realidad, y eso es todo.

67
00:03:22,260 --> 00:03:26,163
Cierra eso y cierra el div también.

68
00:03:27,360 --> 00:03:29,910
y ahí lo tenemos.

69
00:03:29,910 --> 00:03:33,360
Ahora lo que falta aquí es el nombre de la clase de...

70
00:03:39,780 --> 00:03:41,280
tarjetas didácticas.

71
00:03:41,280 --> 00:03:45,060
Como puede ver, ya creé algo de CSS.

72
00:03:45,060 --> 00:03:48,720
Entonces, si copias el código en tu propia computadora,

73
00:03:48,720 --> 00:03:53,720
luego asegúrese de copiar también el contenido de este style.css.

74
00:03:57,720 --> 00:04:00,480
Bien, ahora vemos que aquí tenemos algunos problemas.

75
00:04:00,480 --> 00:04:03,270
que están relacionados con la clave.

76
00:04:03,270 --> 00:04:06,300
Exacto, entonces cada uno necesita una clave única.

77
00:04:06,300 --> 00:04:09,273
Y entonces, bueno, podemos poner eso aquí.

78
00:04:11,310 --> 00:04:14,850
Entonces clave, y luego usemos question.id

79
00:04:14,850 --> 00:04:16,950
porque estos son valores únicos,

80
00:04:16,950 --> 00:04:19,680
y como sabes, cada elemento que representamos aquí

81
00:04:19,680 --> 00:04:23,673
dentro del mapa, por lo que, como lista, necesita una clave única.

82
00:04:24,570 --> 00:04:27,873
Entonces, si recargo ahora, estos errores desaparecerán.

83
00:04:28,860 --> 00:04:32,910
Bien, ahora tenemos todas nuestras partes estáticas construidas.

84
00:04:32,910 --> 00:04:35,430
Ahora lo que tenemos que hacer es que algo suceda.

85
00:04:35,430 --> 00:04:38,670
Cada vez que hacemos clic en uno de estos componentes aquí,

86
00:04:38,670 --> 00:04:41,520
o en realidad, cada uno de estos elementos.

87
00:04:41,520 --> 00:04:44,220
Entonces, ¿cómo vamos a hacer esto?

88
00:04:44,220 --> 00:04:46,410
Bueno, como dije inicialmente,

89
00:04:46,410 --> 00:04:49,620
Todo lo que necesitamos es en realidad una parte del Estado.

90
00:04:49,620 --> 00:04:52,110
y ese pedazo de estado hará un seguimiento

91
00:04:52,110 --> 00:04:56,460
de qué ID de pregunta es actualmente la pregunta activa.

92
00:04:56,460 --> 00:04:59,793
Y si eso suena confuso, escribamos un código.

93
00:05:01,260 --> 00:05:06,260
Así que llamemos a esto el ID seleccionado.

94
00:05:07,410 --> 00:05:08,560
y luego establecerSelectedId.

95
00:05:12,240 --> 00:05:13,073
usoEstado.

96
00:05:14,400 --> 00:05:18,390
Y luego, aquí querremos comenzar con nulo,

97
00:05:18,390 --> 00:05:21,180
porque por defecto no queremos ninguna de las preguntas

98
00:05:21,180 --> 00:05:23,040
estar abierto al principio,

99
00:05:23,040 --> 00:05:25,590
para ser seleccionado al principio.

100
00:05:25,590 --> 00:05:27,270
Y para eso sirve null.

101
00:05:27,270 --> 00:05:30,393
Entonces nulo es básicamente nada.

102
00:05:32,190 --> 00:05:35,780
Ahora aquí necesitamos importar useState desde React.

103
00:05:43,080 --> 00:05:44,103
está bien.

104
00:05:47,190 --> 00:05:50,820
Y ahora recordemos los tres pasos para usar state,

105
00:05:50,820 --> 00:05:52,860
al que me gusta volver siempre

106
00:05:52,860 --> 00:05:55,560
porque creo que esto lo hace un poco más útil

107
00:05:55,560 --> 00:05:57,993
para entender cómo debemos abordar esto.

108
00:05:59,040 --> 00:06:01,980
Entonces el primer paso es definir la variable de estado,

109
00:06:01,980 --> 00:06:03,330
lo cual ya hicimos.

110
00:06:03,330 --> 00:06:06,480
El segundo es luego usar esa variable de estado,

111
00:06:06,480 --> 00:06:08,670
y tercero es actualizarlo.

112
00:06:08,670 --> 00:06:12,360
En cuanto al segundo punto, hagámoslo ahora.

113
00:06:12,360 --> 00:06:16,800
Entonces usemos la ID seleccionada aquí para algo.

114
00:06:16,800 --> 00:06:20,970
Pero bueno esta vez esto es un poco complicado ¿no?

115
00:06:20,970 --> 00:06:25,470
¿Para qué necesitamos realmente la identificación seleccionada?

116
00:06:25,470 --> 00:06:28,200
Bueno, tal vez lo hagamos más fácil.

117
00:06:28,200 --> 00:06:33,200
en lugar de usar null aquí, use uno de estos.

118
00:06:33,300 --> 00:06:35,280
Entonces una de las identificaciones reales.

119
00:06:35,280 --> 00:06:36,240
Entonces 9103.

120
00:06:38,550 --> 00:06:41,220
Entonces si este es el estado.

121
00:06:41,220 --> 00:06:46,220
Entonces imaginemos que acabamos de hacer clic en este de aquí,

122
00:06:46,440 --> 00:06:48,240
cómo dar memoria a los componentes.

123
00:06:48,240 --> 00:06:49,890
Digamos que acabamos de hacer clic aquí.

124
00:06:49,890 --> 00:06:51,990
y para que este sea entonces el estado.

125
00:06:51,990 --> 00:06:54,093
Entonces, ¿cómo queremos utilizar este estado?

126
00:06:55,050 --> 00:06:59,550
Bueno, básicamente aquí, en lugar de mostrar la pregunta,

127
00:06:59,550 --> 00:07:02,310
queremos mostrar la respuesta.

128
00:07:02,310 --> 00:07:04,650
Entonces podemos hacer eso.

129
00:07:04,650 --> 00:07:09,650
Podemos decir que question.id es igual al selectedId.

130
00:07:11,910 --> 00:07:16,910
y si es así, muestra pregunta.respuesta.

131
00:07:17,460 --> 00:07:22,200
Y si no, pues claro la pregunta.pregunta.

132
00:07:22,200 --> 00:07:26,133
Y ahora aquí, esta vez obtuvimos la respuesta.

133
00:07:27,060 --> 00:07:28,623
Entonces ese es el gancho useState.

134
00:07:30,750 --> 00:07:33,243
Y eso ya está funcionando.

135
00:07:34,170 --> 00:07:38,580
Así que hagamos lo mismo con el estilo porque aquí,

136
00:07:38,580 --> 00:07:42,930
En realidad esto se ve así con este fondo rojo.

137
00:07:42,930 --> 00:07:46,110
y entonces podemos usar una clase que creé para eso

138
00:07:46,110 --> 00:07:47,913
y edite aquí a este div.

139
00:07:49,140 --> 00:07:51,063
Entonces hagamos algo similar.

140
00:07:52,290 --> 00:07:56,940
Entonces className, ingresa al modo JavaScript,

141
00:07:56,940 --> 00:07:59,370
y luego hacemos lo mismo.

142
00:07:59,370 --> 00:08:04,240
Entonces, si el question.id actual es igual al selectedId

143
00:08:05,160 --> 00:08:09,543
entonces aquí se debe seleccionar el nombre de la clase.

144
00:08:10,950 --> 00:08:13,110
Y si no, pues nada.

145
00:08:13,110 --> 00:08:14,820
Y ahí vamos.

146
00:08:14,820 --> 00:08:16,173
tan hermoso.

147
00:08:17,370 --> 00:08:19,800
Sólo asegúrate de que realmente entiendes

148
00:08:19,800 --> 00:08:21,750
que esta pasando aqui.

149
00:08:21,750 --> 00:08:24,420
Entonces, mientras recorremos esta matriz aquí,

150
00:08:24,420 --> 00:08:28,950
cada uno de estos elementos es uno de estos divs, ¿verdad?

151
00:08:28,950 --> 00:08:31,440
Y en cada uno de estos divs tenemos acceso

152
00:08:31,440 --> 00:08:34,230
al objeto de la pregunta actual,

153
00:08:34,230 --> 00:08:38,056
y luego cada uno de ellos tiene una identificación.

154
00:08:38,056 --> 00:08:41,550
Entonces, lo que podemos hacer es comparar esa identificación.

155
00:08:41,550 --> 00:08:43,830
con el DNI seleccionado.

156
00:08:43,830 --> 00:08:46,680
Entonces el que hemos seleccionado actualmente.

157
00:08:46,680 --> 00:08:50,034
Y si eso es lo mismo, entonces bueno, es justo lo que

158
00:08:50,034 --> 00:08:51,720
hemos escrito aquí.

159
00:08:51,720 --> 00:08:54,390
Entonces, si es la pregunta seleccionada,

160
00:08:54,390 --> 00:08:57,810
entonces si el ID seleccionado es igual al

161
00:08:57,810 --> 00:09:01,650
que está en el objeto, luego simplemente muestre la respuesta.

162
00:09:01,650 --> 00:09:04,440
Y en caso contrario, en todos los demás casos,

163
00:09:04,440 --> 00:09:07,260
Bueno, entonces muestra la pregunta en sí.

164
00:09:07,260 --> 00:09:08,493
Entonces no es la respuesta.

165
00:09:10,320 --> 00:09:11,340
está bien.

166
00:09:11,340 --> 00:09:14,490
Y ahora, volvamos a establecerlo en nulo.

167
00:09:14,490 --> 00:09:17,610
Y ahora, todo lo que tenemos que hacer es establecer el estado.

168
00:09:17,610 --> 00:09:18,963
Entonces ese es el tercer paso.

169
00:09:20,190 --> 00:09:23,610
Entonces, ¿cuándo queremos actualizar el estado?

170
00:09:23,610 --> 00:09:25,500
Es cada vez que hacemos clic aquí,

171
00:09:25,500 --> 00:09:27,150
entonces en uno de estos divs.

172
00:09:27,150 --> 00:09:31,290
Y ahí es donde colocamos el controlador onClick.

173
00:09:31,290 --> 00:09:33,960
Como ves, ni siquiera tiene que ser un botón.

174
00:09:33,960 --> 00:09:35,970
o algo así.

175
00:09:35,970 --> 00:09:39,090
¿bueno? Y ahora lo que vamos a hacer es

176
00:09:39,090 --> 00:09:40,893
crea una función aquí.

177
00:09:42,390 --> 00:09:44,853
Solo para hacer que nuestro código sea un poco más fácil de entender.

178
00:09:45,930 --> 00:09:48,033
Entonces llamémoslo manejar clic.

179
00:09:50,070 --> 00:09:52,563
Por ahora solo el nombre de la función.

180
00:09:53,670 --> 00:09:57,460
Entonces aquí tenemos que pasar esa función.

181
00:09:59,178 --> 00:10:01,470
¿bien? Sin embargo, eso no es realmente suficiente.

182
00:10:01,470 --> 00:10:06,470
porque bueno, aquí ahora llamaremos a establecer ID seleccionado,

183
00:10:08,310 --> 00:10:09,840
pero como dice el nombre

184
00:10:09,840 --> 00:10:12,450
ahora necesitamos el ID de la pregunta que

185
00:10:12,450 --> 00:10:15,870
debería convertirse en la pregunta seleccionada, ¿verdad?

186
00:10:15,870 --> 00:10:18,600
Y entonces lo que esto significa es que esta función

187
00:10:18,600 --> 00:10:23,600
necesita recibir esa identificación para que luego podamos configurarla aquí.

188
00:10:25,320 --> 00:10:28,650
Entonces ahora necesitamos llamar a esta función de clic de manija.

189
00:10:28,650 --> 00:10:29,853
Con eso lo haría.

190
00:10:32,280 --> 00:10:36,180
Bastante simple question.id.

191
00:10:36,180 --> 00:10:38,700
Pero no cometas el error de pensar

192
00:10:38,700 --> 00:10:40,290
que esto se acabe.

193
00:10:40,290 --> 00:10:44,070
Y de hecho React ya nos dio aquí un error.

194
00:10:44,070 --> 00:10:46,260
Entonces recuerda que aquí tenemos que pasar.

195
00:10:46,260 --> 00:10:49,590
en una función real y no en una llamada de función

196
00:10:49,590 --> 00:10:51,060
como tenemos aquí.

197
00:10:51,060 --> 00:10:54,900
Entonces esto es llamar al identificador, haga clic inmediatamente.

198
00:10:54,900 --> 00:10:56,640
Eso no es lo que queremos.

199
00:10:56,640 --> 00:10:59,880
Queremos pasar una función para que React pueda

200
00:10:59,880 --> 00:11:02,973
luego llame a la función tan pronto como ocurra el evento.

201
00:11:05,160 --> 00:11:08,733
Y la prueba ya debería ser suficiente, al menos por ahora.

202
00:11:09,870 --> 00:11:12,783
¡Eso funcionó muy bien!

203
00:11:14,250 --> 00:11:17,220
Y cuando hago clic en otro, por supuesto este

204
00:11:17,220 --> 00:11:19,080
se convierte en el activo.

205
00:11:19,080 --> 00:11:21,600
Y echemos un vistazo a las herramientas de desarrollo de React.

206
00:11:21,600 --> 00:11:24,210
porque Code Sandbox en realidad también

207
00:11:24,210 --> 00:11:26,133
Tiene las herramientas React integradas.

208
00:11:27,660 --> 00:11:31,860
Entonces, cuando llegamos aquí a la aplicación, o en realidad a las tarjetas didácticas,

209
00:11:31,860 --> 00:11:35,910
observe que el estado ahora es 9103,

210
00:11:35,910 --> 00:11:38,280
que es exactamente esta idea.

211
00:11:38,280 --> 00:11:40,323
Cuando hacemos clic aquí, se convierte en,

212
00:11:42,240 --> 00:11:44,460
Eso debería haberse actualizado,

213
00:11:44,460 --> 00:11:47,490
pero aparentemente no funciona tan bien.

214
00:11:47,490 --> 00:11:48,530
Entonces sí, bueno tal vez, no importa,

215
00:11:48,530 --> 00:11:51,930
cerremos esto de nuevo.

216
00:11:51,930 --> 00:11:55,830
Lo que importa es que esté funcionando al menos en cierta medida.

217
00:11:55,830 --> 00:11:58,983
porque mira lo que pasa cuando hago clic aquí nuevamente.

218
00:12:00,120 --> 00:12:04,230
Entonces no pasa nada, claro, porque, bueno

219
00:12:04,230 --> 00:12:07,467
porque aquí simplemente estamos pasando esa identificación

220
00:12:07,467 --> 00:12:11,790
y luego configuramos esa ID como la ID seleccionada.

221
00:12:11,790 --> 00:12:13,500
Tal como se esperaba.

222
00:12:13,500 --> 00:12:15,720
Pero como vemos aquí, al hacer clic nuevamente

223
00:12:15,720 --> 00:12:18,483
De hecho, vuelve a cerrar la tarjeta.

224
00:12:19,650 --> 00:12:22,140
Entonces esta funcionalidad que ya tenemos de

225
00:12:22,140 --> 00:12:23,520
cambiar entre tarjetas

226
00:12:23,520 --> 00:12:26,643
pero cuando hacemos clic en él, aún no lo tenemos.

227
00:12:27,510 --> 00:12:29,490
Así que hagamos eso.

228
00:12:29,490 --> 00:12:31,500
Y no es demasiado difícil.

229
00:12:31,500 --> 00:12:35,460
Básicamente lo que queremos hacer aquí es establecer esta ID.

230
00:12:35,460 --> 00:12:36,633
basado en una condición.

231
00:12:37,680 --> 00:12:40,620
Entonces queremos decir si el ID de la pregunta

232
00:12:40,620 --> 00:12:44,080
es diferente del seleccionado actualmente

233
00:12:46,170 --> 00:12:50,280
entonces el resultado aquí debería ser la identificación.

234
00:12:50,280 --> 00:12:54,067
Y si no, entonces vuélvelo a ahora.

235
00:12:55,853 --> 00:12:57,810
Ahora aquí hay algún problema.

236
00:12:57,810 --> 00:13:00,033
Ah, sí, tengo uno igual de sobra.

237
00:13:01,470 --> 00:13:02,520
está bien.

238
00:13:02,520 --> 00:13:06,390
De nuevo, si el ID de la pregunta es diferente

239
00:13:06,390 --> 00:13:10,110
desde la ID ya seleccionada, luego configure la ID.

240
00:13:10,110 --> 00:13:13,950
Y ese es exactamente este comportamiento, ¿verdad?

241
00:13:13,950 --> 00:13:17,040
Pero si no, básicamente si el ID de la pregunta

242
00:13:17,040 --> 00:13:19,860
ya es igual al ID seleccionado

243
00:13:19,860 --> 00:13:21,510
luego configúrelo de nuevo en nulo.

244
00:13:21,510 --> 00:13:25,080
Y así, con nulo, ninguno de ellos estará activo.

245
00:13:25,080 --> 00:13:30,080
Y sí, eso funciona y creo que también tiene sentido.

246
00:13:32,460 --> 00:13:35,460
Así que este uso del estado aquí fue bastante

247
00:13:35,460 --> 00:13:37,830
un poco diferente de lo que teníamos antes.

248
00:13:37,830 --> 00:13:40,110
Y por eso decidí de nuevo

249
00:13:40,110 --> 00:13:44,460
incluir este ejercicio aquí al final de esta sección.

250
00:13:44,460 --> 00:13:48,027
Así que asegúrese de estudiar exactamente lo que está sucediendo aquí.

251
00:13:48,027 --> 00:13:50,670
Y luego de eso, creo que estás listo.

252
00:13:50,670 --> 00:13:53,733
para el desafío de codificación final de esta sección.