16. Operador ternario en jsx

  

 Operador Ternario en JSX - React

Introducción al Componente

Vamos a crear un componente en React y aprender a usar el operador ternario dentro de JSX.

Paso 1: Crear el Componente

Primero, creamos una carpeta components dentro de src y nuestro archivo Coffee.jsx:

jsx

// src/components/Coffee.jsx

function Coffee() {
  return (
    <h1>Hola mundo</h1>
  );
}

export default Coffee;

Paso 2: Importar y Usar el Componente

En index.js (o App.js), importamos nuestro componente:

jsx

// En tu archivo principal (index.js o App.js)
import Coffee from './components/Coffee';

// Y lo usamos
<Coffee />

Usando JavaScript en JSX

Podemos mezclar JavaScript con HTML en nuestros componentes:

jsx

function Coffee() {
  // Variable en JavaScript
  const caliente = true;
  
  // Condicional tradicional
  if (caliente === true) {
    return <h1>Café caliente</h1>;
  } else {
    return <h1>Café frío</h1>;
  }
}

Introduciendo el Operador Ternario

El operador ternario nos permite simplificar las condicionales:

jsx

function Coffee() {
  const caliente = true;
  
  return (
    <h1>{caliente ? "Café caliente" : "Café frío"}</h1>
  );
}

Explicación del Operador Ternario

La sintaxis es: condición ? valorSiTrue : valorSiFalse

jsx

{caliente ? "Café caliente" : "Café frío"}

• Si caliente es true → muestra "Café caliente"

• Si caliente es false → muestra "Café frío"

Más Ejemplos del Operador Ternario

Ejemplo 1: Cambiar clases CSS

jsx

function Coffee() {
  const caliente = true;
  
  return (
    <div className={caliente ? "cafe-caliente" : "cafe-frio"}>
      {caliente ? "¡Cuidado, está caliente!" : "Refrescante"}
    </div>
  );
}

Ejemplo 2: Mostrar diferentes elementos

jsx

function Coffee() {
  const tieneAzucar = false;
  
  return (
    <div>
      <h2>Mi Café</h2>
      {tieneAzucar ? (
        <p>☕ Café con azúcar</p>
      ) : (
        <p>☕ Café amargo</p>
      )}
    </div>
  );
}

Ejemplo 3: Operador ternario anidado

jsx

function Coffee() {
  const temperatura = "caliente"; // Puede ser "caliente", "tibio" o "frio"
  
  return (
    <div>
      <h3>
        {temperatura === "caliente" ? "🔥 Caliente" :
         temperatura === "tibio" ? "🌤️ Tibio" :
         "❄️ Frío"}
      </h3>
    </div>
  );
}

Buenas Prácticas

1. Para condiciones simples

jsx

// ✅ Recomendado para condiciones simples
function Coffee() {
  const listaVacia = false;
  
  return (
    <div>
      {listaVacia ? <p>No hay cafés</p> : <p>Lista de cafés disponible</p>}
    </div>
  );
}

2. Para condiciones complejas

jsx

// ✅ Mejor usar una variable intermedia
function Coffee() {
  const temperatura = 85;
  
  const mensaje = temperatura > 80 ? "Muy caliente" :
                  temperatura > 60 ? "Caliente" :
                  temperatura > 40 ? "Tibio" : "Frío";
  
  return <p>El café está: {mensaje}</p>;
}

3. Evitar ternarios demasiado largos

jsx

// ⚠️ Evitar esto
function Coffee() {
  const tipo = "espresso";
  
  return (
    <div>
      {tipo === "espresso" ? <EspressoComponent /> :
       tipo === "latte" ? <LatteComponent /> :
       tipo === "cappuccino" ? <CappuccinoComponent /> :
       tipo === "americano" ? <AmericanoComponent /> :
       <DefaultComponent />}
    </div>
  );
}

// ✅ Mejor así
function Coffee() {
  const tipo = "espresso";
  
  const componentePorTipo = {
    espresso: <EspressoComponent />,
    latte: <LatteComponent />,
    cappuccino: <CappuccinoComponent />,
    americano: <AmericanoComponent />
  };
  
  return (
    <div>
      {componentePorTipo[tipo] || <DefaultComponent />}
    </div>
  );
}

Ejemplo Completo

jsx

// src/components/Coffee.jsx
function Coffee() {
  const temperatura = 75;
  const tieneLeche = true;
  const tieneAzucar = false;
  
  return (
    <div className="coffee-container">
      <h1>Mi Café Personalizado</h1>
      
      {/* Operador ternario para temperatura */}
      <p className={temperatura > 70 ? "hot" : "cold"}>
        Estado: {temperatura > 70 ? "🔥 Caliente" : "❄️ Frío"}
      </p>
      
      {/* Operador ternario para ingredientes */}
      <div className="ingredients">
        <p>{tieneLeche ? "✅ Con leche" : "❌ Sin leche"}</p>
        <p>{tieneAzucar ? "✅ Con azúcar" : "❌ Sin azúcar"}</p>
      </div>
      
      {/* Mensaje personalizado */}
      <p>
        {tieneLeche && tieneAzucar ? "Café completo y dulce" :
         tieneLeche && !tieneAzucar ? "Café con leche sin azúcar" :
         !tieneLeche && tieneAzucar ? "Café solo con azúcar" :
         "Café solo y amargo"}
      </p>
    </div>
  );
}

export default Coffee;

Recuerda Siempre

1. Exporta tu componente: export default Coffee

2. Usa llaves {} para insertar JavaScript en JSX

3. Mantén los ternarios simples y legibles

4. Considera alternativas como variables intermedias para lógica compleja

5. Los ternarios son perfectos para mostrar/ocultar o cambiar contenido basado en condiciones

¡Ahora estás listo para usar operadores ternarios en tus componentes de React