Renderizado Condicional

Renderizado Condicional

En React, puedes crear distintas UI dependiendo de condiciones. Hay varias formas de renderizar condicionalmente en JSX.

Usando if/else

function Saludo({ estaLogueado }) {
  if (estaLogueado) {
    return <h1>Bienvenido de vuelta!</h1>;
  }
  return <h1>Por favor inicia sesion.</h1>;
}

// Con retorno anticipado
function Dashboard({ usuario }) {
  if (!usuario) {
    return <p>Cargando...</p>;
  }

  return (
    <div>
      <h1>Hola, {usuario.nombre}</h1>
      {/* ... resto del dashboard */}
    </div>
  );
}

Operador Ternario

function Saludo({ estaLogueado }) {
  return (
    <div>
      {estaLogueado
        ? <h1>Bienvenido de vuelta!</h1>
        : <h1>Por favor inicia sesion.</h1>
      }
    </div>
  );
}

// Para atributos
function Boton({ esPrimario }) {
  return (
    <button className={esPrimario ? 'btn-primario' : 'btn-secundario'}>
      Click
    </button>
  );
}

Operador AND (&&)

function Notificaciones({ mensajes }) {
  return (
    <div>
      <h1>Panel</h1>
      {mensajes.length > 0 && (
        <p>Tienes {mensajes.length} mensajes sin leer.</p>
      )}
    </div>
  );
}

// Cuidado con 0 - usa comparacion explicita
function Lista({ items }) {
  return (
    <div>
      {items.length > 0 && <ul>...</ul>}
      {/* No usar: items.length && ... (mostraria 0) */}
    </div>
  );
}

Renderizado con Switch

function EstadoPedido({ estado }) {
  const renderEstado = () => {
    switch (estado) {
      case 'pendiente':
        return <span className="amarillo">Pendiente</span>;
      case 'enviado':
        return <span className="azul">Enviado</span>;
      case 'entregado':
        return <span className="verde">Entregado</span>;
      case 'cancelado':
        return <span className="rojo">Cancelado</span>;
      default:
        return <span>Desconocido</span>;
    }
  };

  return <div>Estado: {renderEstado()}</div>;
}

Renderizado con Objetos

function Icono({ tipo }) {
  const iconos = {
    exito: '✓',
    error: '✗',
    advertencia: '⚠',
    info: 'ℹ'
  };

  return <span>{iconos[tipo] || iconos.info}</span>;
}