1
00:00:01,050 --> 00:00:03,030
En React, muchas operaciones necesitan

2
00:00:03,030 --> 00:00:05,790
ser inmutable por lo que las operaciones

3
00:00:05,790 --> 00:00:10,290
donde no manipulamos la estructura de datos subyacente.

4
00:00:10,290 --> 00:00:12,960
Y por lo tanto, es muy importante

5
00:00:12,960 --> 00:00:15,900
saber cómo agregar elementos a una carrera,

6
00:00:15,900 --> 00:00:19,680
cómo eliminar elementos y también actualizar elementos

7
00:00:19,680 --> 00:00:23,793
todo sin mutar la matriz subyacente original.

8
00:00:25,080 --> 00:00:27,360
Ahora estas técnicas que vamos a aprender aquí.

9
00:00:27,360 --> 00:00:31,050
son absolutamente esenciales para el desarrollo de React

10
00:00:31,050 --> 00:00:34,800
pero la buena noticia es que siempre funcionan de la misma forma.

11
00:00:34,800 --> 00:00:37,920
Y si entiendes aquí cómo funciona,

12
00:00:37,920 --> 00:00:41,223
Entonces estarás bien preparado para el resto del curso.

13
00:00:42,180 --> 00:00:45,840
Como mencioné, lo que queremos hacer aquí es aprender cómo

14
00:00:45,840 --> 00:00:48,690
cómo agregar elementos, cómo eliminar elementos,

15
00:00:48,690 --> 00:00:51,300
y cómo actualizar elementos de una matriz

16
00:00:51,300 --> 00:00:54,060
sin cambiar el original.

17
00:00:54,060 --> 00:00:57,360
Y así una vez más vamos a trabajar.

18
00:00:57,360 --> 00:00:59,460
con nuestra variedad de libros.

19
00:00:59,460 --> 00:01:01,440
Entonces una serie de objetos,

20
00:01:01,440 --> 00:01:03,840
que realmente es lo más común,

21
00:01:03,840 --> 00:01:06,570
Entonces, la estructura de datos más común a la que vamos.

22
00:01:06,570 --> 00:01:10,263
encontrar cuando trabajamos con datos en el front-end.

23
00:01:12,750 --> 00:01:17,750
Entonces digamos primero agregar un objeto de libro a la matriz.

24
00:01:23,610 --> 00:01:27,663
Comencemos creando este nuevo objeto libro aquí.

25
00:01:29,460 --> 00:01:32,973
Entonces este será el número seis aquí.

26
00:01:33,870 --> 00:01:37,180
El titulado debe ser

27
00:01:39,397 --> 00:01:44,397
Harry Potter y la cámara de los secretos".

28
00:01:46,680 --> 00:01:51,213
Secretos, bueno, todavía está mal.

29
00:01:53,250 --> 00:01:58,250
Y luego la autora es JK Rowling.

30
00:01:59,760 --> 00:02:03,063
Entonces ya tienes un libro de Harry Potter en la colección.

31
00:02:03,063 --> 00:02:05,583
Y ahora aquí agregamos otro.

32
00:02:06,690 --> 00:02:11,190
Y de hecho, ya aprendimos cómo creamos una nueva matriz.

33
00:02:11,190 --> 00:02:13,080
basado en una matriz original

34
00:02:13,080 --> 00:02:15,033
y luego agregando algún otro elemento.

35
00:02:15,990 --> 00:02:18,210
Entonces, hablamos de eso desde el principio.

36
00:02:18,210 --> 00:02:22,290
de la sección cuando hablamos del operador de diferencial.

37
00:02:22,290 --> 00:02:23,123
¿recuerda eso?

38
00:02:24,270 --> 00:02:29,140
Entonces digamos libros y luego de agregar, digamos

39
00:02:30,570 --> 00:02:31,653
o después de agregar.

40
00:02:33,510 --> 00:02:38,400
Y entonces todo lo que tenemos que hacer es difundir todos los libros aquí.

41
00:02:38,400 --> 00:02:41,040
en esta matriz recién creada,

42
00:02:41,040 --> 00:02:44,883
y luego simplemente agregue otro libro, es decir, otro objeto.

43
00:02:47,160 --> 00:02:50,660
Y luego echamos un vistazo a esto aquí mismo.

44
00:02:52,980 --> 00:02:54,900
Verás que ahora tenemos seis de ellos.

45
00:02:54,900 --> 00:02:58,980
y el último es este que acabamos de crear.

46
00:02:58,980 --> 00:03:01,983
Y nuevamente, podríamos agregar esto también al principio.

47
00:03:02,880 --> 00:03:06,900
Así que aquí, pero lo más común es simplemente agregar un libro nuevo.

48
00:03:06,900 --> 00:03:09,540
hasta el final de la matriz.

49
00:03:09,540 --> 00:03:11,283
Entonces este fue bastante fácil.

50
00:03:12,240 --> 00:03:14,970
Ahora eliminemos un libro.

51
00:03:14,970 --> 00:03:19,970
Entonces elimine un objeto de libro de la matriz.

52
00:03:21,180 --> 00:03:24,540
Nuevamente, esto siempre funcionará exactamente de la misma manera.

53
00:03:24,540 --> 00:03:27,000
no importa cómo se vean los objetos.

54
00:03:27,000 --> 00:03:30,273
Bueno, siempre y cuando tengan DNI, que suelen tener.

55
00:03:31,230 --> 00:03:35,913
Ahora vamos a crear una nueva matriz nuevamente.

56
00:03:37,230 --> 00:03:38,490
Así que siempre hay nuevas matrices.

57
00:03:38,490 --> 00:03:41,940
Siempre necesitamos no mutar nada.

58
00:03:41,940 --> 00:03:43,830
pero crea nuevas matrices.

59
00:03:43,830 --> 00:03:47,730
Ahora, en la práctica, estas operaciones se abstraerían.

60
00:03:47,730 --> 00:03:49,290
en algunas funciones.

61
00:03:49,290 --> 00:03:52,743
Entonces, por ejemplo, crearíamos una función llamada agregar libro

62
00:03:52,743 --> 00:03:57,743
y eliminar libro y actualizar libro en lugar de crear

63
00:03:58,380 --> 00:04:00,450
Todas estas matrices son así.

64
00:04:00,450 --> 00:04:02,880
Pero, por supuesto, esto es sólo para ilustrar la idea.

65
00:04:02,880 --> 00:04:05,433
y la técnica, ¿vale?

66
00:04:06,390 --> 00:04:09,450
Entonces los libros después de eliminarlos serán una nueva matriz

67
00:04:09,450 --> 00:04:13,620
después de eliminar uno de los objetos del libro.

68
00:04:13,620 --> 00:04:18,240
Básicamente, ahora crearemos una nueva matriz basada en libros.

69
00:04:18,240 --> 00:04:21,000
después de agregar, que acabamos de crear.

70
00:04:21,000 --> 00:04:24,810
Y ahora vamos a utilizar uno de nuestros métodos de matriz.

71
00:04:24,810 --> 00:04:27,960
Así que pensemos juntos en esto.

72
00:04:27,960 --> 00:04:29,820
Entonces, queremos eliminar un libro.

73
00:04:29,820 --> 00:04:33,090
Y así, después de eliminar, la matriz será más corta.

74
00:04:33,090 --> 00:04:36,540
que antes y entonces cuál de los métodos de matriz

75
00:04:36,540 --> 00:04:39,840
¿Hace una matriz más corta que antes?

76
00:04:39,840 --> 00:04:41,310
Bueno, eso es correcto.

77
00:04:41,310 --> 00:04:43,950
Es la matriz de filtros, ¿verdad?

78
00:04:43,950 --> 00:04:46,200
Entonces, cuando filtramos algo,

79
00:04:46,200 --> 00:04:49,170
entonces la nueva matriz será más corta.

80
00:04:49,170 --> 00:04:54,170
Así que filtremos y una vez más, cada elemento aquí es un libro.

81
00:04:57,360 --> 00:05:00,060
Y entonces, en este caso, digamos que queremos eliminar el libro.

82
00:05:00,060 --> 00:05:01,650
con el DNI número tres.

83
00:05:01,650 --> 00:05:06,650
Y entonces podemos decir que book.id es diferente de tres.

84
00:05:09,810 --> 00:05:10,960
Y eso es todo.

85
00:05:14,250 --> 00:05:15,663
Echemos un vistazo a eso.

86
00:05:16,920 --> 00:05:20,760
Este tiene el ID dos y el siguiente tiene el número cuatro.

87
00:05:20,760 --> 00:05:22,773
Entonces tres ya no están ahí.

88
00:05:23,880 --> 00:05:24,713
excelente.

89
00:05:24,713 --> 00:05:26,430
Entonces, ¿por qué funcionó esto?

90
00:05:26,430 --> 00:05:30,150
Bueno, por lo que ya aprendimos antes.

91
00:05:30,150 --> 00:05:32,940
Entonces, siempre que esta condición aquí en la devolución de llamada

92
00:05:32,940 --> 00:05:36,300
devuelve un valor falso entonces ese objeto

93
00:05:36,300 --> 00:05:38,940
no estará en la matriz final.

94
00:05:38,940 --> 00:05:42,210
Entonces, si queremos eliminar el libro con el ID tres,

95
00:05:42,210 --> 00:05:46,110
básicamente lo que queremos es incluir en el array final

96
00:05:46,110 --> 00:05:50,850
todos los libros donde el ID es diferente a tres, ¿no?

97
00:05:50,850 --> 00:05:53,580
Porque nuevamente, siempre que esta condición aquí

98
00:05:53,580 --> 00:05:56,370
es realmente cierto, el objeto terminará

99
00:05:56,370 --> 00:05:58,740
en la matriz filtrada final.

100
00:05:58,740 --> 00:06:00,870
Y entonces, la forma más fácil de pensar en esto.

101
00:06:00,870 --> 00:06:02,910
es realmente escribir una condición

102
00:06:02,910 --> 00:06:06,540
lo que coloca los objetos en la nueva matriz.

103
00:06:06,540 --> 00:06:10,380
Y nuevamente, eso sucede siempre que el ID del libro es diferente.

104
00:06:10,380 --> 00:06:14,370
que tres porque cuando son tres, queremos eliminarlo.

105
00:06:14,370 --> 00:06:16,655
Y sí, eso es exactamente lo que pasó aquí.

106
00:06:16,655 --> 00:06:19,533
como vimos aquí en el resultado.

107
00:06:22,110 --> 00:06:26,790
Genial y nuevamente, normalmente crearíamos una función.

108
00:06:26,790 --> 00:06:29,940
llamado eliminar libro y luego esa función recibiría

109
00:06:29,940 --> 00:06:32,670
esta ID aquí y luego aquí simplemente usaríamos

110
00:06:32,670 --> 00:06:34,320
esa identificación así.

111
00:06:34,320 --> 00:06:37,830
Pero aquí simplemente estamos eliminando manualmente el que

112
00:06:37,830 --> 00:06:39,390
con el DNI de tres.

113
00:06:39,390 --> 00:06:43,050
De nuevo, sólo para ilustrar cómo funciona todo.

114
00:06:43,050 --> 00:06:47,467
Y ahora, en la etapa final, actualicemos un objeto de libro,

115
00:06:52,680 --> 00:06:53,943
bueno, en la matriz.

116
00:06:54,990 --> 00:06:58,810
Entonces libros, digamos después de la actualización.

117
00:07:00,330 --> 00:07:03,720
y lo haremos en los libros después de eliminarlo.

118
00:07:03,720 --> 00:07:07,200
Entonces, es como encadenar todo esto aquí, uno tras otro.

119
00:07:07,200 --> 00:07:12,200
Pero estamos almacenando el resultado intermedio dentro de variables.

120
00:07:12,510 --> 00:07:16,920
Y nuevamente, pensemos en qué método de matriz necesitamos aquí.

121
00:07:16,920 --> 00:07:20,040
Entonces, después de actualizar uno de los objetos del libro,

122
00:07:20,040 --> 00:07:23,070
la matriz resultante debe tener exactamente la misma longitud

123
00:07:23,070 --> 00:07:25,170
como antes ¿no?

124
00:07:25,170 --> 00:07:27,540
Y entonces, ¿qué método produce una matriz?

125
00:07:27,540 --> 00:07:29,553
¿Cuál tiene la misma longitud que antes?

126
00:07:30,450 --> 00:07:33,120
Sí, ese es el método del mapa.

127
00:07:33,120 --> 00:07:37,290
Entonces el mapa es nuestra elección cada vez que queremos actualizar un objeto.

128
00:07:37,290 --> 00:07:38,733
eso está dentro de una matriz.

129
00:07:41,310 --> 00:07:46,310
Bien, ahora necesitamos nuestro operador de turno porque nosotros,

130
00:07:47,130 --> 00:07:50,940
Por supuesto, no quiero hacer nada con la mayoría de los libros.

131
00:07:50,940 --> 00:07:54,600
Solo queremos actualizar exactamente un objeto de libro.

132
00:07:54,600 --> 00:07:57,960
que es el que tiene el ID que estamos buscando.

133
00:07:57,960 --> 00:08:00,150
Entonces, imaginemos que queremos actualizar el libro.

134
00:08:00,150 --> 00:08:05,150
con el ID de uno, entonces digamos book.id si es uno,

135
00:08:07,020 --> 00:08:10,530
luego devolver un objeto actualizado, que por ahora,

136
00:08:10,530 --> 00:08:14,010
escribamos un objeto vacío temporalmente.

137
00:08:14,010 --> 00:08:17,580
Pero si no, entonces simplemente devuelve el libro tal como está.

138
00:08:17,580 --> 00:08:18,963
así sin ningún cambio.

139
00:08:19,860 --> 00:08:24,030
Y eso es simplemente un libro, ¿verdad?

140
00:08:24,030 --> 00:08:27,240
Así que veamos ya el resultado aquí.

141
00:08:27,240 --> 00:08:30,633
sólo para ver que algo pasó.

142
00:08:34,230 --> 00:08:36,810
De nuevo, estamos intentando actualizar el libro.

143
00:08:36,810 --> 00:08:38,070
con el DNI de uno.

144
00:08:38,070 --> 00:08:41,460
Y ahora este de aquí es solo un objeto vacío.

145
00:08:41,460 --> 00:08:45,003
porque este era aquel en el que el ID del libro era igual a uno.

146
00:08:46,380 --> 00:08:48,960
Entonces era igual a uno y por lo tanto,

147
00:08:48,960 --> 00:08:51,480
entonces lo que se devolvió de esta función de devolución de llamada

148
00:08:51,480 --> 00:08:54,450
Era este objeto vacío, que es lo que vemos aquí.

149
00:08:54,450 --> 00:08:55,890
Pero para todos los demás,

150
00:08:55,890 --> 00:08:58,530
simplemente devolvió el objeto original.

151
00:08:58,530 --> 00:09:00,303
Entonces nada cambió.

152
00:09:01,361 --> 00:09:04,371
Ahora bien, pero claro que no queremos

153
00:09:04,371 --> 00:09:09,120
para devolver este objeto vacío pero queremos devolver un objeto

154
00:09:09,120 --> 00:09:11,460
que tiene una propiedad actualizada.

155
00:09:11,460 --> 00:09:15,690
Y de hecho, ya aprendimos cómo hacerlo hace mucho tiempo.

156
00:09:15,690 --> 00:09:17,373
nuevamente usando el operador de extensión.

157
00:09:18,240 --> 00:09:21,960
Entonces, recuerde, simplemente extendemos el objeto libro actual

158
00:09:21,960 --> 00:09:23,370
en este objeto.

159
00:09:23,370 --> 00:09:25,410
Entonces este objeto recién creado.

160
00:09:25,410 --> 00:09:28,530
Entonces, tomamos básicamente todas las propiedades.

161
00:09:28,530 --> 00:09:32,100
en este nuevo objeto y luego simplemente podemos sobrescribir

162
00:09:32,100 --> 00:09:32,933
uno de ellos.

163
00:09:33,930 --> 00:09:38,930
Digamos que queremos páginas nuevamente, 1210.

164
00:09:39,180 --> 00:09:41,760
Hagamos algo un poco más dramático sólo para ver

165
00:09:41,760 --> 00:09:43,023
el resultado un poco mejor.

166
00:09:44,130 --> 00:09:49,130
Y sí, ahora solo tenemos una página aquí.

167
00:09:49,230 --> 00:09:53,343
mientras que todo lo demás tampoco se ve afectado.

168
00:09:54,930 --> 00:09:58,353
Pongámoslo 1.210 y ahí vamos.

169
00:09:59,280 --> 00:10:03,840
Entonces actualizamos una propiedad en un objeto de la matriz.

170
00:10:03,840 --> 00:10:07,080
Y esto es nuevamente algo que hacemos todo el tiempo.

171
00:10:07,080 --> 00:10:09,700
Entonces básicamente necesitas memorizar

172
00:10:09,700 --> 00:10:12,480
esta receta aquí mismo.

173
00:10:12,480 --> 00:10:17,480
Entonces, cuando queremos agregar un nuevo objeto a una matriz, hacemos esto.

174
00:10:17,580 --> 00:10:20,370
Creamos una nueva matriz, distribuimos los elementos actuales,

175
00:10:20,370 --> 00:10:22,080
y agregue el nuevo elemento.

176
00:10:22,080 --> 00:10:24,540
Cuando queremos eliminar uno, usamos filtro.

177
00:10:24,540 --> 00:10:28,740
porque el filtro acorta la matriz resultante.

178
00:10:28,740 --> 00:10:33,740
Luego simplemente guardamos todos los elementos del libro.

179
00:10:33,990 --> 00:10:36,660
Entonces, todos los objetos del libro donde la idea es diferente.

180
00:10:36,660 --> 00:10:38,880
que el que queremos eliminar.

181
00:10:38,880 --> 00:10:41,190
Y para actualizar usamos el método del mapa.

182
00:10:41,190 --> 00:10:44,520
porque el método map crea una matriz que tiene

183
00:10:44,520 --> 00:10:47,310
exactamente la misma longitud que el original.

184
00:10:47,310 --> 00:10:51,780
Y entonces cuando estemos en el ID que estamos buscando

185
00:10:51,780 --> 00:10:55,470
para que queramos manipular, entonces creamos un nuevo objeto

186
00:10:55,470 --> 00:10:59,190
y anular la propiedad que queremos manipular.

187
00:10:59,190 --> 00:11:00,900
Y para todos los demás libros,

188
00:11:00,900 --> 00:11:03,483
simplemente devolvemos el libro sin cambios.