1
00:00:01,000 --> 00:00:03,690
Para practicar el estado un poco más,

2
00:00:03,690 --> 00:00:07,200
implementemos ahora la funcionalidad de abrir y cerrar

3
00:00:07,200 --> 00:00:08,703
para nuestro componente.

4
00:00:10,200 --> 00:00:12,060
Entonces, mirando la demostración aquí,

5
00:00:12,060 --> 00:00:15,000
lo que queremos implementar ahora es esta funcionalidad

6
00:00:15,000 --> 00:00:17,370
que cuando hagamos clic en este botón aquí,

7
00:00:17,370 --> 00:00:20,160
entonces esta parte del componente desaparece,

8
00:00:20,160 --> 00:00:23,760
y luego, cuando volvemos a hacer clic en él, vuelve.

9
00:00:23,760 --> 00:00:27,720
Como esto es algo que cambia en la pantalla,

10
00:00:27,720 --> 00:00:30,303
eso significa que necesitamos un nuevo Estado.

11
00:00:31,200 --> 00:00:36,030
Primero comentemos este otro estado que tenemos aquí.

12
00:00:36,030 --> 00:00:38,490
para que lo creemos para nuestro experimento.

13
00:00:38,490 --> 00:00:40,170
No lo borraré por completo

14
00:00:40,170 --> 00:00:42,390
sólo para mantenerlo como referencia aquí.

15
00:00:42,390 --> 00:00:45,810
Pero de todos modos, creemos ahora un nuevo Estado.

16
00:00:45,810 --> 00:00:48,047
Entonces esto se llamará isOpen,

17
00:00:49,440 --> 00:00:52,020
y luego nuevamente la convención para el colocador

18
00:00:52,020 --> 00:00:53,670
es llamarlo conjunto

19
00:00:53,670 --> 00:00:56,160
y luego el nombre del estado, entonces setIsOpen,

20
00:00:58,020 --> 00:00:59,763
tan igual usoEstado,

21
00:01:01,440 --> 00:01:04,410
y por defecto, nuestro componente debería estar abierto,

22
00:01:04,410 --> 00:01:06,660
por lo tanto, pasamos el valor de verdadero.

23
00:01:06,660 --> 00:01:09,450
Entonces isOpen comienza como verdadero,

24
00:01:09,450 --> 00:01:12,360
y ese es nuestro valor de estado predeterminado

25
00:01:12,360 --> 00:01:13,863
para el estado isOpen.

26
00:01:14,700 --> 00:01:17,370
Esa es la primera parte del uso del estado.

27
00:01:17,370 --> 00:01:21,150
La segunda es usar la variable de estado.

28
00:01:21,150 --> 00:01:22,800
en nuestro código.

29
00:01:22,800 --> 00:01:26,910
Entonces, ¿qué queremos lograr con esta variable de estado?

30
00:01:26,910 --> 00:01:31,500
Bueno, siempre que sea cierto, queremos que esto se demuestre aquí.

31
00:01:31,500 --> 00:01:34,800
Y si es falso, no queremos que esto se demuestre.

32
00:01:34,800 --> 00:01:38,190
Y siempre que sea falso, no queremos que esto se demuestre.

33
00:01:38,190 --> 00:01:41,253
Entonces, lo que esto significa es que necesitamos renderizado condicional.

34
00:01:43,080 --> 00:01:45,930
Así que hagamos eso.

35
00:01:45,930 --> 00:01:48,870
Ahora no podemos terminar todo esto aquí.

36
00:01:48,870 --> 00:01:50,583
en modo JavaScript ahora,

37
00:01:51,600 --> 00:01:53,100
pero sigamos intentándolo.

38
00:01:53,100 --> 00:01:55,050
Así que lo seleccioné todo.

39
00:01:55,050 --> 00:01:57,420
y luego abriré las llaves

40
00:01:57,420 --> 00:01:59,070
para ingresar al modo JavaScript.

41
00:01:59,070 --> 00:02:00,420
Pero esto realmente no funcionará.

42
00:02:00,420 --> 00:02:04,560
porque esto sólo se puede hacer dentro de algún elemento.

43
00:02:04,560 --> 00:02:08,133
Entonces, por ejemplo, necesitaríamos un div aquí.

44
00:02:11,670 --> 00:02:13,083
Y entonces aquí, ciérralo.

45
00:02:15,840 --> 00:02:18,513
Sin embargo, React todavía no está contento.

46
00:02:20,190 --> 00:02:21,963
¿entonces que tenemos aqui?

47
00:02:22,920 --> 00:02:25,230
Ah, la prueba no está definida.

48
00:02:25,230 --> 00:02:28,290
Eso es porque acabamos de eliminar

49
00:02:28,290 --> 00:02:30,810
este pedazo de estado aquí de antes,

50
00:02:30,810 --> 00:02:34,023
Así que comentemos esto y guárdelo.

51
00:02:34,860 --> 00:02:36,570
Y nuevamente, primero necesitábamos crear

52
00:02:36,570 --> 00:02:38,580
este elemento div aquí afuera,

53
00:02:38,580 --> 00:02:41,190
básicamente para iniciar nuestro JSX.

54
00:02:41,190 --> 00:02:43,200
Y entonces dentro de ese JSX

55
00:02:43,200 --> 00:02:45,540
Es donde podemos ingresar al modo JavaScript.

56
00:02:45,540 --> 00:02:47,700
Y necesitamos este modo JavaScript aquí.

57
00:02:47,700 --> 00:02:51,077
porque ahora usaremos nuestro isOpen.

58
00:02:53,400 --> 00:02:55,560
Y luego, en cuanto a la representación condicional,

59
00:02:55,560 --> 00:02:57,933
simplemente usemos el operador final,

60
00:02:59,220 --> 00:03:02,130
dale un save y listo.

61
00:03:02,130 --> 00:03:04,140
Entonces, siempre que esto sea cierto,

62
00:03:04,140 --> 00:03:06,690
entonces esta segunda parte aquí será devuelta.

63
00:03:06,690 --> 00:03:10,680
Y cuando sea falso, solo se devolverá falso.

64
00:03:10,680 --> 00:03:13,893
Eso es justo lo que aprendimos en la sección anterior.

65
00:03:14,940 --> 00:03:15,840
está bien.

66
00:03:15,840 --> 00:03:19,200
Ahora como esto es cierto, aquí no pasa nada,

67
00:03:19,200 --> 00:03:23,163
entonces esto todavía es visible, pero si lo estableciésemos en falso,

68
00:03:24,150 --> 00:03:25,983
entonces nuestro componente debería desaparecer.

69
00:03:26,880 --> 00:03:29,220
Sí, entonces ya no está.

70
00:03:29,220 --> 00:03:32,673
Y por lo tanto lo que esto significa es que está funcionando.

71
00:03:33,990 --> 00:03:36,450
Así que volvamos a ponerlo en verdad,

72
00:03:36,450 --> 00:03:40,440
y con esto terminamos la segunda parte de usar state.

73
00:03:40,440 --> 00:03:42,720
Y ahora la tercera parte del uso del estado.

74
00:03:42,720 --> 00:03:45,240
es realmente actualizar el estado.

75
00:03:45,240 --> 00:03:48,120
Para eso, necesitamos nuestro botón aquí en la esquina.

76
00:03:48,120 --> 00:03:52,620
y para eso necesitamos escribir más JSX.

77
00:03:52,620 --> 00:03:53,853
Así que hagámoslo aquí.

78
00:03:55,260 --> 00:04:00,260
Entonces botón con un nombre de clase de cierre

79
00:04:00,390 --> 00:04:04,620
y luego aquí, podemos usar una entidad HTML de tiempos

80
00:04:04,620 --> 00:04:06,513
que básicamente escribirá una X.

81
00:04:07,500 --> 00:04:08,640
aquí vamos.

82
00:04:08,640 --> 00:04:11,100
Y ahora necesitamos nuestro controlador de eventos.

83
00:04:11,100 --> 00:04:15,270
Entonces, para eso, usemos nuevamente el accesorio onClick,

84
00:04:15,270 --> 00:04:19,710
para adjuntar directamente el controlador de eventos a este elemento.

85
00:04:19,710 --> 00:04:21,510
Y esta vez solo para mostrarte,

86
00:04:21,510 --> 00:04:24,300
Déjame crear una función en línea aquí.

87
00:04:24,300 --> 00:04:27,360
Entonces, en lugar de crear una función de control aquí

88
00:04:27,360 --> 00:04:28,620
como estos dos,

89
00:04:28,620 --> 00:04:31,710
Ahora definiré la función directamente aquí.

90
00:04:31,710 --> 00:04:34,980
Sólo para mostrarles que a veces esto también es lo que hacemos.

91
00:04:34,980 --> 00:04:37,863
especialmente cuando tenemos una lógica muy simple.

92
00:04:39,660 --> 00:04:41,610
Entonces necesitamos crear una nueva función,

93
00:04:41,610 --> 00:04:44,160
¿Y ahora qué queremos hacer aquí?

94
00:04:44,160 --> 00:04:47,280
Bueno, queremos actualizar el estado isOpen.

95
00:04:47,280 --> 00:04:49,187
Entonces el conjunto está abierto,

96
00:04:50,850 --> 00:04:54,000
y luego nuevamente, tenemos que pasar al nuevo estado,

97
00:04:54,000 --> 00:04:55,860
entonces el estado actualizado.

98
00:04:55,860 --> 00:04:57,780
¿Y qué debería ser eso?

99
00:04:57,780 --> 00:05:02,340
Bueno, siempre debería ser lo contrario del estado actual.

100
00:05:02,340 --> 00:05:05,160
Entonces, si esta apertura es verdadera, debería volverse falsa,

101
00:05:05,160 --> 00:05:07,440
y si es falso, debería convertirse en verdad.

102
00:05:07,440 --> 00:05:11,310
Y la forma en que lo hacemos es usando el operador not.

103
00:05:11,310 --> 00:05:14,763
De nuevo, eso es solo JavaScript común y estándar.

104
00:05:16,170 --> 00:05:19,770
Bien, y esto ya debería funcionar.

105
00:05:19,770 --> 00:05:23,160
Así que recarguemos aquí para deshacernos de ese error.

106
00:05:23,160 --> 00:05:27,090
Y sí, hermosa.

107
00:05:27,090 --> 00:05:28,950
Eso está funcionando bien.

108
00:05:28,950 --> 00:05:32,520
Entonces nuestra vista se actualiza y se vuelve a renderizar.

109
00:05:32,520 --> 00:05:34,380
Y luego, después de volver a renderizar,

110
00:05:34,380 --> 00:05:36,420
isOpen ya no es cierto,

111
00:05:36,420 --> 00:05:37,920
pero es falso.

112
00:05:37,920 --> 00:05:41,310
Por lo tanto, entonces toda esta parte aquí de JSX

113
00:05:41,310 --> 00:05:44,580
ya no se renderiza, ¿verdad?

114
00:05:44,580 --> 00:05:46,530
Pero luego, cuando volvemos a hacer clic,

115
00:05:46,530 --> 00:05:49,290
esta función aquí se llama nuevamente,

116
00:05:49,290 --> 00:05:52,230
que luego cambiará isOpen al otro estado.

117
00:05:52,230 --> 00:05:54,990
Entonces de falso a verdadero, en este caso.

118
00:05:54,990 --> 00:05:57,210
Y así actualizar este pedazo de estado.

119
00:05:57,210 --> 00:06:00,360
Luego hará que React vuelva a renderizar el componente.

120
00:06:00,360 --> 00:06:03,150
Esta vez con isOpen to true.

121
00:06:03,150 --> 00:06:07,350
Entonces, cuando React ve este fragmento de código, isOpen es verdadero,

122
00:06:07,350 --> 00:06:10,290
y por lo tanto se devuelve este JSX.

123
00:06:10,290 --> 00:06:11,123
Y así con esto,

124
00:06:11,123 --> 00:06:15,720
Actualizamos la vista aquí mismo en nuestra aplicación.

125
00:06:15,720 --> 00:06:16,650
excelente.

126
00:06:16,650 --> 00:06:20,400
Ahora lo que quiero que notes sobre esto es que...

127
00:06:20,400 --> 00:06:22,680
Cambiemos el estado aquí.

128
00:06:22,680 --> 00:06:25,890
Nuevamente, con esto aquí, cambiamos el estado del paso,

129
00:06:25,890 --> 00:06:28,140
que ahora mismo está en el número 2.

130
00:06:28,140 --> 00:06:30,600
Y ahora, si alternamos este estado,

131
00:06:30,600 --> 00:06:33,870
Entonces, si cambiamos este estado y lo volvemos a cambiar,

132
00:06:33,870 --> 00:06:38,400
Verás que React efectivamente recordó el estado del paso.

133
00:06:38,400 --> 00:06:41,610
a pesar de que volvimos a renderizar este componente varias veces

134
00:06:41,610 --> 00:06:44,100
en el medio, ¿no?

135
00:06:44,100 --> 00:06:46,890
Entonces, si lo configuramos en 3 y luego otra vez,

136
00:06:46,890 --> 00:06:50,940
Puedo abrir y puedo cerrar, lo que significa que este componente,

137
00:06:50,940 --> 00:06:54,540
entonces esta vista aquí se ha reordenado dos veces,

138
00:06:54,540 --> 00:06:57,960
todavía recordará este otro pedazo de estado.

139
00:06:57,960 --> 00:07:00,030
Entonces el 3 todavía está aquí.

140
00:07:00,030 --> 00:07:01,440
Y por eso decimos

141
00:07:01,440 --> 00:07:04,530
ese estado es como un recuerdo del componente.

142
00:07:04,530 --> 00:07:07,230
Puede retener esta información a lo largo del tiempo.

143
00:07:07,230 --> 00:07:11,430
a pesar de que lo renderizamos y volvemos a renderizar una y otra vez.

144
00:07:11,430 --> 00:07:12,263
excelente.

145
00:07:12,263 --> 00:07:14,400
Así que con esto espero que empieces a ver.

146
00:07:14,400 --> 00:07:17,760
cómo podemos usar el estado en diferentes situaciones

147
00:07:17,760 --> 00:07:20,940
y para diferentes cosas en la práctica.

148
00:07:20,940 --> 00:07:24,120
Ahora, sólo una pequeña cosa que podríamos cambiar aquí:

149
00:07:24,120 --> 00:07:26,130
y esto no tiene nada que ver con el estado,

150
00:07:26,130 --> 00:07:28,650
es que en realidad no queremos volver

151
00:07:28,650 --> 00:07:30,660
Sólo un elemento aquí.

152
00:07:30,660 --> 00:07:33,660
Entonces queremos devolver básicamente ambos,

153
00:07:33,660 --> 00:07:35,700
esta parte aquí y el botón.

154
00:07:35,700 --> 00:07:36,900
Y entonces esto significa

155
00:07:36,900 --> 00:07:40,143
que este es un gran caso de uso para un fragmento de React aquí.

156
00:07:41,010 --> 00:07:44,160
Entonces, antes de hacer eso, simplemente inspeccionemos.

157
00:07:44,160 --> 00:07:47,070
Y así, efectivamente, tenemos nuestra raíz

158
00:07:47,070 --> 00:07:48,720
que es básicamente todo,

159
00:07:48,720 --> 00:07:50,100
Entonces toda la aplicación.

160
00:07:50,100 --> 00:07:53,970
Y luego ahí tenemos este div, que es este.

161
00:07:53,970 --> 00:07:56,160
Pero nuevamente, digamos que no queremos eso.

162
00:07:56,160 --> 00:07:58,260
Digamos que solo queremos tener el botón

163
00:07:58,260 --> 00:08:00,423
y luego estos pasos div.

164
00:08:01,350 --> 00:08:06,350
Así que eliminemos esto de aquí y de aquí.

165
00:08:06,600 --> 00:08:09,720
Y ahora tenemos que recordar un fragmento.

166
00:08:09,720 --> 00:08:14,100
Esa es como la raíz de este elemento JSX aquí.

167
00:08:14,100 --> 00:08:16,440
que luego desaparecerá en el DOM.

168
00:08:16,440 --> 00:08:17,820
Entonces, si echamos un vistazo ahora,

169
00:08:17,820 --> 00:08:22,820
entonces solo nos queda este botón y el paso div.

170
00:08:22,950 --> 00:08:26,130
De nuevo, siempre que estés en una situación como ésta,

171
00:08:26,130 --> 00:08:30,960
Entonces, ¿necesitas un fragmento de JSX para devolver dos elementos?

172
00:08:30,960 --> 00:08:33,543
entonces el fragmento es genial para eso.