1
00:00:01,050 --> 00:00:01,883
la tercera manera

2
00:00:01,883 --> 00:00:05,070
en el que podemos renderizar condicionalmente algunos JSX

3
00:00:05,070 --> 00:00:08,973
o algún componente es mediante el uso de múltiples devoluciones.

4
00:00:10,560 --> 00:00:13,290
Entonces, hasta este punto, todos nuestros componentes

5
00:00:13,290 --> 00:00:18,030
Sólo he tenido exactamente una palabra clave de retorno, ¿verdad?

6
00:00:18,030 --> 00:00:19,800
Pero no hay nada que nos detenga

7
00:00:19,800 --> 00:00:24,720
de agregar otra palabra clave de retorno basada en alguna condición.

8
00:00:24,720 --> 00:00:26,250
Entonces, por supuesto, cada componente

9
00:00:26,250 --> 00:00:29,790
todavía solo puede devolver un bloque de JSX,

10
00:00:29,790 --> 00:00:32,793
pero ese retorno puede depender de una condición.

11
00:00:33,870 --> 00:00:37,053
En otras palabras, podemos hacer, por ejemplo, esto.

12
00:00:38,310 --> 00:00:42,270
Entonces, aquí mismo, estamos fuera de JSX,

13
00:00:42,270 --> 00:00:44,550
entonces simplemente estamos dentro del componente,

14
00:00:44,550 --> 00:00:47,340
y aquí podemos escribir cualquier JavaScript que queramos.

15
00:00:47,340 --> 00:00:50,140
Entonces, ahora podemos usar fácilmente las palabras clave if.

16
00:00:51,090 --> 00:00:56,090
entonces podemos decir si no está abierto, entonces regresar,

17
00:00:56,730 --> 00:00:58,683
por ejemplo, este mensaje aquí mismo.

18
00:00:59,850 --> 00:01:04,850
Entonces, este JSX, pégalo aquí y eso es todo.

19
00:01:07,380 --> 00:01:10,170
Entonces, si el restaurante no está abierto

20
00:01:10,170 --> 00:01:12,210
entonces esto será devuelto.

21
00:01:12,210 --> 00:01:15,780
Pero si se abre, entonces todo esto aquí no se ejecuta,

22
00:01:15,780 --> 00:01:20,070
y luego simplemente se ejecutará nuestro retorno normal.

23
00:01:20,070 --> 00:01:22,440
Lo importante aquí es que estos dos retornos

24
00:01:22,440 --> 00:01:24,570
no puede suceder al mismo tiempo,

25
00:01:24,570 --> 00:01:26,793
pero eso es ahora en resumen aquí,

26
00:01:27,870 --> 00:01:30,903
así que pongámoslo nuevamente en 20.

27
00:01:32,970 --> 00:01:37,970
Y ahora recibimos esto, exactamente este mensaje aquí mismo.

28
00:01:38,700 --> 00:01:40,710
Entonces, no viene de aquí,

29
00:01:40,710 --> 00:01:44,310
para que podamos reemplazar esto, pero lo dejaré aquí,

30
00:01:44,310 --> 00:01:46,173
y te explicaré en un segundo por qué.

31
00:01:47,280 --> 00:01:50,850
Pero de todos modos, esto en realidad viene de aquí,

32
00:01:50,850 --> 00:01:53,820
y por supuesto podríamos hacer cualquier cosa aquí,

33
00:01:53,820 --> 00:01:57,840
sólo para asegurarnos de que realmente proviene de allí.

34
00:01:57,840 --> 00:02:01,230
Y sí, ahora el problema en este caso.

35
00:02:01,230 --> 00:02:03,960
es que ya no estamos rindiendo

36
00:02:03,960 --> 00:02:07,650
el elemento de pie de página alrededor de esta p,

37
00:02:07,650 --> 00:02:10,020
Entonces, si quisiéramos hacer exactamente lo mismo,

38
00:02:10,020 --> 00:02:13,470
También tendríamos que copiar el pie de página aquí, ¿no?

39
00:02:13,470 --> 00:02:15,630
De lo contrario, el pie de página sólo se representaría

40
00:02:15,630 --> 00:02:17,940
en caso de que el restaurante esté abierto.

41
00:02:17,940 --> 00:02:21,420
Pero si no, no existiría ningún pie de página.

42
00:02:21,420 --> 00:02:22,950
Entonces, esto es en realidad, en este caso,

43
00:02:22,950 --> 00:02:25,653
no es lo que queremos, ¿vale?

44
00:02:26,550 --> 00:02:30,120
Por lo general, este regreso temprano, como lo hicimos aquí,

45
00:02:30,120 --> 00:02:31,950
es más útil cuando queremos

46
00:02:31,950 --> 00:02:35,010
para renderizar componentes completos condicionalmente

47
00:02:35,010 --> 00:02:37,743
pero no sólo algunas piezas de JSX.

48
00:02:39,570 --> 00:02:42,840
Entonces, intentemos algo más aquí tal vez,

49
00:02:42,840 --> 00:02:46,443
y lo que estoy buscando es en realidad este componente de pizza.

50
00:02:47,760 --> 00:02:52,173
Entonces, recuerda que la pizza tiene la propiedad de estar agotada.

51
00:02:53,040 --> 00:02:55,053
Entonces podemos ver eso aquí en los accesorios.

52
00:02:55,950 --> 00:03:00,780
Entonces, cada pizza recibe este objeto de pizza ahora como accesorio.

53
00:03:00,780 --> 00:03:02,140
y luego nos hemos agotado.

54
00:03:03,088 --> 00:03:06,343
Entonces, lo que podemos hacer aquí como regreso anticipado es decir

55
00:03:07,710 --> 00:03:12,710
si props.pizza object.soldOut, no devuelve nada.

56
00:03:18,330 --> 00:03:21,240
Y así con esto entonces la pizza que se agotó.

57
00:03:21,240 --> 00:03:24,930
no aparecerá en la interfaz de usuario,

58
00:03:24,930 --> 00:03:27,573
y de hecho había una pizza.

59
00:03:29,520 --> 00:03:32,430
Entonces, esa es ésta, Pizza Salamino,

60
00:03:32,430 --> 00:03:34,680
y eso ya no está aquí ahora,

61
00:03:34,680 --> 00:03:38,280
Y eso se debe a que aquí tenemos este regreso anticipado.

62
00:03:38,280 --> 00:03:41,280
A veces esa es una técnica bastante común.

63
00:03:41,280 --> 00:03:44,520
que podemos usar, que es simplemente devolver nulo,

64
00:03:44,520 --> 00:03:48,960
así que nada en caso de que exista una determinada condición que sea cierta,

65
00:03:48,960 --> 00:03:51,510
y en este caso, esto puede resultar bastante útil.

66
00:03:51,510 --> 00:03:54,330
Así que por ahora dejemos esto aquí, aunque más adelante,

67
00:03:54,330 --> 00:03:57,870
Haremos algo aún mejor con esta propiedad.

68
00:03:57,870 --> 00:03:59,160
Entonces, como conclusión

69
00:03:59,160 --> 00:04:02,250
de estas tres conferencias sobre representación condicional

70
00:04:02,250 --> 00:04:06,332
mi recomendación es utilizar el operador de devolución siempre que

71
00:04:06,332 --> 00:04:11,070
debe devolver alguna parte de JSX según una condición.

72
00:04:11,070 --> 00:04:14,250
Entonces, solo por ejemplo, como este aquí.

73
00:04:14,250 --> 00:04:16,590
Entonces, esto lo vamos a usar todo el tiempo.

74
00:04:16,590 --> 00:04:20,670
pero también a veces simplemente quieres hacer algo como esto,

75
00:04:20,670 --> 00:04:23,670
entonces quieres devolver algo completamente diferente

76
00:04:23,670 --> 00:04:25,560
no importa si eso no es nada

77
00:04:25,560 --> 00:04:28,380
o si eso es solo algún otro componente.

78
00:04:28,380 --> 00:04:30,870
Así, por ejemplo, también podríamos decir aquí

79
00:04:30,870 --> 00:04:32,720
algo que no tiene ningún sentido

80
00:04:33,900 --> 00:04:35,523
pero intentemos esto.

81
00:04:37,050 --> 00:04:39,000
Entonces, podríamos hacer esto.

82
00:04:39,000 --> 00:04:40,890
Entonces, en caso de que esté agotado,

83
00:04:40,890 --> 00:04:43,800
devolvimos el encabezado en este lugar.

84
00:04:43,800 --> 00:04:46,320
Entonces, nuevamente aquí eso no tiene ningún sentido.

85
00:04:46,320 --> 00:04:48,063
pero esa sería una posibilidad,

86
00:04:49,200 --> 00:04:50,730
aunque no muy bueno.

87
00:04:50,730 --> 00:04:52,890
Entonces, a lo largo de este curso aprenderás

88
00:04:52,890 --> 00:04:55,320
cual de estas opciones es la mejor

89
00:04:55,320 --> 00:04:57,690
simplemente practicándolos y usándolos

90
00:04:57,690 --> 00:05:00,363
en diferentes situaciones una y otra vez.