If blocks ({#if}) in Svelte - Mini Project: Build & Apply

Conditional Rendering with If Blocks in Svelte

📖 Scenario: You are building a simple Svelte component for a weather app. The app should show a message about the weather condition. If it is sunny, it should say "It's sunny outside!" Otherwise, it should say "It's not sunny today."

🎯 Goal: Create a Svelte component that uses an {#if} block to display a message based on the weather condition stored in a variable.

📋 What You'll Learn

Create a variable called weather with the value "sunny".

Create a variable called isSunny that is true if weather is exactly "sunny", otherwise false.

Use a Svelte {#if} block to show the text "It's sunny outside!" when isSunny is true.

Use the {:else} block to show the text "It's not sunny today." when isSunny is false.

💡 Why This Matters

🌍 Real World

Conditional rendering is essential in web apps to show or hide parts of the page based on user data or app state, like showing different messages for weather conditions.

💼 Career

Understanding how to use if blocks in frameworks like Svelte is a key skill for frontend developers to build interactive and dynamic user interfaces.

1

Set up the weather variable

Create a variable called weather and set it to the string "sunny".

Svelte

// Your code here

Hint

Use let weather = "sunny"; to create the variable.

2

Create the isSunny variable

Create a variable called isSunny that is true if weather equals "sunny", otherwise false.

Svelte

let weather = "sunny";
// Your code here

Hint

Use the strict equality operator === to compare weather with "sunny".

3

Add the if block for sunny weather

Use a Svelte {#if} block to display "It's sunny outside!" only when isSunny is true.

Svelte

let weather = "sunny";
let isSunny = weather === "sunny";

Hint

Wrap the message inside {#if isSunny} and {/if} tags.

4

Add the else block for other weather

Add an {:else} block to the existing {#if} block to display "It's not sunny today." when isSunny is false.

Svelte

let weather = "sunny";
let isSunny = weather === "sunny";

{#if isSunny}
  It's sunny outside!
{:else}
  
{/if}

Hint

Use {:else} followed by the message inside a paragraph tag.

Practice

1. What does the {#if} block do in Svelte?

easy

A. It conditionally shows or hides content based on a true or false value.

B. It loops over a list of items to display them.

C. It styles elements with CSS inside the component.

D. It defines a reusable component.

Solution

1. Step 1: Understand the purpose of {#if}

   The {#if} block is used to check a condition and decide if some content should be shown or hidden.

2. Step 2: Compare with other options

   Looping is done with {#each}, styling is done with CSS, and reusable components are separate files or functions.

3. Final Answer:

   It conditionally shows or hides content based on a true or false value. -> Option A

4. Quick Check:

   Conditional display = C [OK]

Hint: If you want to show/hide, think {#if} block [OK]

Common Mistakes:

• Confusing {#if} with loops like {#each}
• Thinking {#if} styles elements
• Mixing {#if} with component creation

2. Which of the following is the correct syntax for an {#if} block in Svelte?

easy

A. {if condition} ... {endif}

B. <if condition> ... </if>

C. {#if condition} ... {/if}

D. {#if condition} ... {#end}

Solution

1. Step 1: Recall Svelte if block syntax

   Svelte uses {#if condition} ... {/if} to start and end an if block.

2. Step 2: Check other options for correctness

   Options A and C use incorrect syntax from other languages or HTML. {#if condition} ... {#end} uses a wrong closing tag.

3. Final Answer:

   {#if condition} ... {/if} -> Option C

4. Quick Check:

   Correct Svelte if syntax = B [OK]

Hint: Remember Svelte uses {/if} to close if blocks [OK]

Common Mistakes:

• Using HTML <if> tags instead of Svelte syntax
• Forgetting the # in {#if}
• Using wrong closing tags like {#end}

3. What will be rendered by this Svelte code?

{`\n{#if loggedIn}\n  
Welcome back!
\n{:else}\n  
Please log in.
\n{/if}`}

medium

A. Welcome back!

B. Please log in.

C. Nothing will be shown

D. Syntax error

Solution

1. Step 1: Check the value of loggedIn

   The variable loggedIn is set to false initially.

2. Step 2: Understand the if-else block behavior

   If loggedIn is true, it shows "Welcome back!"; else it shows "Please log in." Since loggedIn is false, the else block runs.

3. Final Answer:

   <p>Please log in.</p> -> Option B

4. Quick Check:

   loggedIn false shows else block = A [OK]

Hint: False condition shows {:else} content [OK]

Common Mistakes:

• Assuming false shows the if block content
• Ignoring the {:else} block
• Thinking no output if condition false

4. Identify the error in this Svelte code snippet:

{`\n{#if count > 3}\n  
Count is high
\n{:else if count > 1}\n  
Count is medium
\n{:else}\n  
Count is low
\n{/if}`}

medium

A. The syntax {:else if} is invalid in Svelte.

B. The variable count should be declared with const, not let.

C. The closing tag {/if} is missing.

D. There is no error; the code is correct.

Solution

1. Step 1: Check if {:else if} is valid in Svelte

   Svelte supports {:else if} syntax to chain conditions inside {#if} blocks.

2. Step 2: Verify variable declaration and closing tags

   Using let for count is correct for reactive variables. The {/if} closing tag is present.

3. Final Answer:

   There is no error; the code is correct. -> Option D

4. Quick Check:

   Valid else if syntax and proper closure = A [OK]

Hint: Svelte supports {:else if} inside {#if} blocks [OK]

Common Mistakes:

• Thinking {:else if} is invalid syntax
• Forgetting {/if} closing tag
• Confusing let and const for reactive vars

5. You want to display a message only if a user is logged in and has admin rights. Which Svelte {#if} block correctly checks both conditions?

hard

A. {#if loggedIn && isAdmin} Welcome, admin! {/if}

B. {#if loggedIn || isAdmin} Welcome, admin! {/if}

C. {#if loggedIn} {:if isAdmin} Welcome, admin! {/if} {/if}

D. {#if loggedIn | isAdmin} Welcome, admin! {/if}

Solution

1. Step 1: Understand the condition requirements

   The message should show only if both loggedIn and isAdmin are true, so we need a logical AND.

2. Step 2: Evaluate each option's logic

   {#if loggedIn | isAdmin}

   Welcome, admin!

   {/if} uses | bitwise OR which shows if either is true (wrong). {#if loggedIn || isAdmin}

   Welcome, admin!

   {/if} uses || logical OR which means either can be true (wrong). {#if loggedIn} {:if isAdmin}

   Welcome, admin!

   {/if} {/if} uses invalid {:if} syntax. {#if loggedIn && isAdmin}

   Welcome, admin!

   {/if} uses && logical AND which requires both true (correct).

3. Final Answer:

   {#if loggedIn && isAdmin} <p>Welcome, admin!</p> {/if} -> Option A

4. Quick Check:

   Use && for both true conditions [OK]

Hint: Use && to require both conditions true in {#if} [OK]

Common Mistakes:

• Using || instead of && for both conditions
• Using bitwise | instead of logical &&
• Using invalid {:if} syntax