Entonces, veamos cómo podemos hacer lo mismo.
con el operador ternario.
Entonces, en lugar del operador final aquí,
usemos ahora el operador ternario
para hacer renderizado condicional.
Y de nuevo, en caso de que no estés familiarizado.
con este operador ternario,
por favor revisa la sección anterior
con la revisión de JavaScript necesario para React.
Entonces, el operador ternario tiene tres partes,
y la primera parte es una condición
y si esta condición es verdadera, entonces el resultado
de la operación será esta segunda parte del operador,
que ahora mismo es todo esto no?
Pero entonces el operador ternario también necesita una tercera parte,
que es básicamente como la rama else.
Y así, si queremos reproducir lo mismo
teníamos antes, aquí podemos simplemente escribir no.
Así que dale una caja fuerte y verás que tenemos
exactamente el mismo resultado que antes.
De nuevo, el operador ternario tiene tres partes.
Entonces, primero una condición, y si esto es cierto,
entonces esta primera rama aquí se convertirá en el resultado
de la operación.
Entonces, de usar el operador.
Pero si es falso, entonces esta última parte aquí,
entonces esta tercera parte, será el resultado.
Y eso es lo que se representa en este caso.
Comprobemos eso y efectivamente, eso es lo que sucede.
Ahora, la ventaja de usar el operador de giro es que
entonces podemos mostrar alguna alternativa.
Así que escribamos más JSX aquí.
y digamos: "Todavía estamos trabajando en nuestro menú".
Por favor, vuelve más tarde", por ejemplo.
Entonces entendemos esto.
Entonces, esto es, en algunas situaciones,
un poco mejor que simplemente no mostrar nada.
Pero volvamos atrás y allá vamos.
Quizás se pregunte por qué no podemos simplemente usar
una declaración if-else aquí mismo.
Bueno, la razón es, una vez más,
por lo que aprendimos en la conferencia sobre las reglas
de JSX, que es que dentro de este modo JavaScript,
No podemos escribir ningún JavaScript.
Lo que tenemos que hacer aquí es escribir algo.
que realmente produce un valor
y una declaración if-else no produce un valor.
Entonces, experimentemos algo ficticio.
Entonces, digamos que escribimos,
"Si el número de pizzas es mayor que cero, entonces" esto.
Así que intentémoslo.
Pero sí, eso realmente no va a suceder.
E incluso recibimos este gran error aquí.
y simplemente dice: "Token inesperado".
Bueno, eso es todo lo que dice.
Y sí, la razón aquí es
que hacer esto no produce un valor.
Y entonces es lo mismo que tener esto
al final ya no?
Entonces, el operador ternario, cuando se usa así,
es realmente agradable y lo prefiero mucho
solo sobre el operador final que estábamos usando.
Entonces regresemos aquí y reemplácelo también.
en esta situación aquí.
Entonces, reemplacemos eso aquí.
Y luego también, imprimamos una alternativa aquí.
Entonces, otra pieza de JSX, estamos felices de darle la bienvenida.
en el medio, tomemos esto desde aquí.
Así que aquí tenemos la hora de apertura, ¿vale?
Cambiémoslo nuevamente a 20 y sí, bien.
Entonces, el operador ternario es una herramienta realmente importante.
en su caja de herramientas de React.
Y una vez más, aquí solo usamos JavaScript.
No hay nada específico de React que debas aprender
o memorizar para realizar una representación condicional.
Todo ya es parte del lenguaje JavaScript.
Sólo necesitas saber que así es como lo usas.
Básicamente, dentro de estas llaves
para entrar en modo JavaScript y luego, bueno, entonces,
simplemente usa el operador tal como lo harías
en JavaScript básico.