Mostrarlo u Ocultarlo

No todo debe mostrarse todo el tiempo. Los mensajes de error aparecen cuando algo sale mal. Los indicadores de carga se muestran mientras se obtienen datos. Las confirmaciones de éxito aparecen después de enviar un formulario. Los bloques condicionales de Svelte te permiten controlar qué se renderiza según el estado de tu aplicación.

Qué Aprenderás

Usar {#if} para renderizar contenido condicionalmente
Agregar {:else} para contenido alternativo
Encadenar múltiples condiciones con {:else if}
Aplicar condicionales al formulario de reservas de BookIt

El Bloque If Básico

La sintaxis {#if} imita la sentencia if de JavaScript:

{#if condition}
  <p>This renders when condition is true</p>
{/if}

El contenido interno solo aparece cuando condition es verdadero (truthy). Cuando la condición es falsa (falsy), no se renderiza nada en ese lugar.

Un Ejemplo Práctico

Veamos cómo funcionan las condiciones con estado reactivo. Este ejemplo muestra un mensaje de bienvenida según el estado de inicio de sesión:

<script>
  let isLoggedIn = $state(false);
</script>

{#if isLoggedIn}
  <p>Welcome back!</p>
{/if}

<button onclick={() => isLoggedIn = !isLoggedIn}>
  Toggle Login
</button>

Haz clic en el botón. El mensaje de bienvenida aparece y desaparece. El bloque {#if} reacciona a los cambios de estado automáticamente — no se necesita manipulación manual del DOM.

Nota: Este es un ejemplo de aprendizaje para demostrar el concepto. No lo estamos agregando a BookIt.

Las Condiciones Pueden Ser Cualquier Expresión

La condición no tiene que ser un booleano simple. Cualquier expresión de JavaScript funciona:

<script>
  let services = $state([]);
  let searchQuery = $state('');
  let user = $state(null);
  let price = $state(50);
</script>

<!-- Array length check -->
{#if services.length > 0}
  <p>Found {services.length} services</p>
{/if}

<!-- String check -->
{#if searchQuery}
  <p>Searching for: {searchQuery}</p>
{/if}

<!-- Null check -->
{#if user}
  <p>Hello, {user.name}</p>
{/if}

<!-- Comparison -->
{#if price > 100}
  <span class="premium">Premium Service</span>
{/if}

Se aplican las reglas de verdadero/falso (truthy/falsy) de JavaScript. Estos valores son falsy (el bloque no se renderiza): 0, "", null, undefined, false. Todo lo demás es truthy.

Agregar una Rama Else

A menudo querrás mostrar contenido alternativo cuando la condición es falsa:

{#if isLoggedIn}
  <p>Welcome back!</p>
{:else}
  <p>Please log in to continue.</p>
{/if}

Ahora siempre se muestra algo — ya sea el mensaje de bienvenida o el aviso de inicio de sesión. Nota la sintaxis: {:else} usa dos puntos, lo que indica una continuación del bloque en lugar de un bloque nuevo.

Múltiples Condiciones con `{:else if}`

A veces necesitas más de dos opciones. El estado podría ser pendiente, confirmado, completado o cancelado. El bloque {:else if} maneja estos escenarios:

{#if status === 'pending'}
  <span class="badge pending">⏳ Pending</span>
{:else if status === 'confirmed'}
  <span class="badge confirmed">✓ Confirmed</span>
{:else if status === 'completed'}
  <span class="badge completed">✓ Completed</span>
{:else if status === 'cancelled'}
  <span class="badge cancelled">✗ Cancelled</span>
{:else}
  <span class="badge">Unknown</span>
{/if}

Svelte verifica las condiciones de arriba hacia abajo. La primera condición verdadera gana y el resto se omite. Usaremos exactamente este patrón más adelante cuando construyamos la página de gestión de reservas.

El Orden Importa

Las condiciones se evalúan de arriba hacia abajo. La primera coincidencia gana:

<script>
  let price = $state(75);
</script>

<!-- ❌ Wrong order — "Premium" never triggers -->
{#if price > 0}
  <span>Budget</span>
{:else if price > 50}
  <span>Standard</span>
{:else if price > 100}
  <span>Premium</span>
{/if}

<!-- ✅ Correct order — most specific first -->
{#if price > 100}
  <span>Premium</span>
{:else if price > 50}
  <span>Standard</span>
{:else if price > 0}
  <span>Budget</span>
{/if}

Coloca las condiciones más específicas (restrictivas) primero.

Aplicando a BookIt: Confirmación del Formulario

Ahora apliquemos lo que aprendimos a BookIt. Actualizaremos el formulario de reservas para mostrar un mensaje de confirmación después del envío. Antes del envío, los usuarios ven el formulario. Después del envío, ven un mensaje de agradecimiento.

Abre tu BookingForm.svelte y actualízalo con este patrón:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  let customerName = $state('');
  let email = $state('');
  let date = $state('');
  let time = $state('');
  let notes = $state('');
  
  let submitted = $state(false);
  
  function handleSubmit(event) {
    event.preventDefault();
    submitted = true;
  }
</script>

{#if submitted}
  <div class="confirmation">
    <h2>Booking Requested!</h2>
    <p>Thanks, {customerName}! We'll confirm your booking soon.</p>
    <p>We'll send details to {email}.</p>
    <button onclick={() => submitted = false}>Book Another Service</button>
  </div>
{:else}
  <form onsubmit={handleSubmit}>
    <h2>Book a Service</h2>

    <div class="field">
      <label for="name">Your Name</label>
      <input 
        type="text" 
        id="name" 
        name="name" 
        placeholder="Jane Smith" 
        bind:value={customerName} 
      />
    </div>

    <div class="field">
      <label for="email">Email Address</label>
      <input 
        type="email" 
        id="email" 
        name="email" 
        placeholder="jane@example.com" 
        bind:value={email} 
      />
    </div>

    <div class="field">
      <label for="date">Preferred Date</label>
      <input type="date" id="date" name="date" bind:value={date} />
    </div>

    <div class="field">
      <label for="time">Preferred Time</label>
      <select id="time" name="time" bind:value={time}>
        <option value="">Select a time...</option>
        <option value="09:00">9:00 AM</option>
        <option value="10:00">10:00 AM</option>
        <option value="11:00">11:00 AM</option>
        <option value="13:00">1:00 PM</option>
        <option value="14:00">2:00 PM</option>
        <option value="15:00">3:00 PM</option>
      </select>
    </div>

    <div class="field">
      <label for="notes">Additional Notes</label>
      <textarea
        id="notes"
        name="notes"
        rows="3"
        placeholder="Any special requests?"
        bind:value={notes}
      ></textarea>
    </div>

    <button type="submit">Request Booking</button>
  </form>
{/if}

Qué Agregamos

Una variable de estado submitted — Rastrea si el formulario ha sido enviado
Una función handleSubmit — Establece submitted en true cuando se envía el formulario
Un bloque {#if}/{:else} — Muestra la confirmación cuando se ha enviado, el formulario en caso contrario
Un botón "Reservar Otro" — Restablece submitted para mostrar el formulario nuevamente

Pruébalo

Navega a una página de servicio (p. ej., http://localhost:5173/services/lawn-mowing)
Completa tu nombre y correo electrónico
Haz clic en "Request Booking"
Deberías ver el mensaje de confirmación con tu nombre
Haz clic en "Book Another Service" para regresar al formulario

Una sola condición controla cuál vista completa aparece. Este es un patrón común para flujos de múltiples pasos.

Condiciones Anidadas

Puedes anidar bloques {#if} para lógica compleja:

{#if isLoggedIn}
  {#if hasBookings}
    <p>View your upcoming bookings</p>
  {:else}
    <p>You have no bookings yet</p>
  {/if}
{:else}
  <p>Log in to see your bookings</p>
{/if}

Esto verifica primero el estado de inicio de sesión y luego el estado de la reserva. Sin embargo, las condiciones profundamente anidadas se vuelven difíciles de leer. Considera refactorizar la lógica compleja en valores derivados o componentes separados.

Cuando los Else-If Se Vuelven Inmanejables

Las cadenas largas de else-if se vuelven difíciles de leer. Para muchas condiciones, considera alternativas:

Búsqueda por objeto:

<script>
  const categoryDescriptions = {
    'lawn-care': 'Professional lawn maintenance services.',
    'tree-care': 'Tree pruning and maintenance.',
    'consultation': 'Expert garden advice and planning.',
    'cleaning': 'Outdoor cleaning and pressure washing.'
  };
  
  let selectedCategory = $state('lawn-care');
</script>

<p>{categoryDescriptions[selectedCategory]}</p>

Renderizado basado en datos con $derived:

<script>
  const categories = [
    { id: 'lawn-care', name: 'Lawn Care', description: '...', icon: '🌿' },
    { id: 'tree-care', name: 'Tree Care', description: '...', icon: '🌳' },
    // ... more categories
  ];
  
  let selectedCategory = $state('lawn-care');
  
  let currentCategory = $derived(
    categories.find(c => c.id === selectedCategory)
  );
</script>

{#if currentCategory}
  <h2>{currentCategory.icon} {currentCategory.name}</h2>
  <p>{currentCategory.description}</p>
{/if}

Regla general: ¿tres condiciones? Usa else-if. ¿Diez condiciones? Usa estructuras de datos. Exploraremos $derived más a fondo en el Módulo 10.

Errores Comunes

Olvidar la Etiqueta de Cierre

<!-- ❌ Missing closing tag -->
{#if isLoggedIn}
  <p>Welcome!</p>

<!-- ✅ Properly closed -->
{#if isLoggedIn}
  <p>Welcome!</p>
{/if}

Todo {#if} necesita un {/if} que lo cierre.

Usar Asignación en Lugar de Comparación

<!-- ❌ This assigns, doesn't compare -->
{#if count = 5}

<!-- ✅ This compares -->
{#if count === 5}

Usa === para comparar, no =.

Verificar Existencia de Array vs Longitud

<!-- ❌ Array exists but might be empty -->
{#if services}
  <p>Showing services</p>
{/if}

<!-- ✅ Check if array has items -->
{#if services.length > 0}
  <p>Showing services</p>
{/if}

Un array vacío [] es truthy. Verifica .length para confirmar que tiene contenido.

Falta el Else Final

<!-- ❌ No fallback for unexpected values -->
{#if status === 'active'}
  <span>Active</span>
{:else if status === 'inactive'}
  <span>Inactive</span>
{/if}

<!-- ✅ Always handle unexpected cases -->
{#if status === 'active'}
  <span>Active</span>
{:else if status === 'inactive'}
  <span>Inactive</span>
{:else}
  <span>Unknown</span>
{/if}

Resumen

Los bloques condicionales de Svelte controlan qué se renderiza según el estado. Aprendiste los tres patrones condicionales y los aplicaste al formulario de reservas de BookIt, creando una vista de dos estados que alterna entre el formulario y un mensaje de confirmación.

Lo que construiste:

Actualizaste BookingForm.svelte con el estado de envío
Agregaste una vista de confirmación usando {#if}/{:else}
Creaste un botón "Reservar Otro" para reiniciar el formulario

Conclusiones clave:

{#if condition}...{/if} renderiza contenido de forma condicional
{:else} provee contenido alternativo cuando la condición es falsa
{:else if} encadena múltiples condiciones en secuencia
La primera condición que coincide gana — el orden importa

Próximos Pasos

¿Qué pasa cuando no hay nada que mostrar? Continúa con Manejar Estados Vacíos para mostrar mensajes útiles cuando la lista de servicios está vacía.