Using data in pages in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Svelte page display?

Consider this Svelte page code:

  <script>
    export let name = 'Guest';
  </script>

  <h1>Hello {name}!
  </h1>

What will the page show if no name is passed?

Svelte

<script>
  export let name = 'Guest';
</script>

<h1>Hello {name}!</h1>

A Hello undefined!

B Hello !

C Hello Guest!

D Error: name is not defined

💡 Hint

Check the default value assigned to name.

The export let name = 'Guest'; line sets a default value 'Guest' if no value is passed. So the page shows 'Hello Guest!'.

❓ state_output

intermediate

What is the output after clicking the button twice?

Given this Svelte page:

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>Click me</button>
<p>Clicked {count} times</p>

What will the paragraph show after clicking the button twice?

Svelte

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>Click me</button>
<p>Clicked {count} times</p>

A Clicked 2 times

B Clicked 1 times

C Clicked 0 times

D Error: increment is not a function

💡 Hint

Each click calls increment which adds 1 to count.

Clicking twice calls increment twice, increasing count from 0 to 2. The paragraph updates reactively.

📝 Syntax

advanced

Which option correctly fetches data in a Svelte page?

You want to fetch JSON data from /api/data when the page loads and store it in items. Which code snippet is correct?

A

<script>
  import { onMount } from 'svelte';
  let items = [];
  onMount(async () => {
    const res = await fetch('/api/data');
    items = await res.json();
  });
</script>

B

<script>
  let items = [];
  fetch('/api/data')
    .then(res => res.json())
    .then(data => items = data);
</script>

C

<script>
  let items = [];
  async function load() {
    const res = await fetch('/api/data');
    items = await res.json();
  }
  load();
</script>

D

<script>
  let items = [];
  fetch('/api/data').json().then(data => items = data);
</script>

💡 Hint

Think about when the fetch runs and how to handle async in Svelte.

Option A uses onMount to run the fetch after the component mounts, correctly awaiting the response and updating items. Option A runs fetch immediately but does not guarantee component is ready. Option A calls an async function immediately but is less idiomatic. Option A has a syntax error: fetch(...).json() is invalid.

🔧 Debug

advanced

Why does this Svelte page not update the displayed name?

Look at this code:

<script>
  export let user = { name: 'Alice' };
  function changeName() {
    user.name = 'Bob';
  }
</script>

<h1>Hello {user.name}!</h1>
<button on:click={changeName}>Change Name</button>

Clicking the button does not update the displayed name. Why?

Svelte

<script>
  export let user = { name: 'Alice' };
  function changeName() {
    user.name = 'Bob';
  }
</script>

<h1>Hello {user.name}!</h1>
<button on:click={changeName}>Change Name</button>

A The function changeName is not called because the button has no on:click event.

B The syntax for updating user.name is incorrect; it should use user.setName('Bob').

C The user variable is read-only because it is exported and cannot be changed.

D Svelte does not detect changes to object properties; you must assign a new object to trigger update.

💡 Hint

Think about how Svelte tracks changes to variables and objects.

Svelte tracks assignments to variables to update the UI. Changing a property inside an object does not trigger reactivity. You must assign a new object, e.g., user = {...user, name: 'Bob'}, to update the UI.

🧠 Conceptual

expert

What is the correct way to pass data from a Svelte page to a nested component?

You have a Svelte page that fetches a list of products. You want to pass this list to a nested <ProductList> component. Which approach correctly passes the data?

A <ProductList export let products={products} />

B <ProductList products={products} />

C <ProductList let:products={products} />

D <ProductList bind:products={products} />

💡 Hint

Recall how props are passed in Svelte components.

Option B passes the products variable as a prop to ProductList. Option B tries to bind a prop which is for two-way binding and requires the child to declare export let products. Option B is invalid syntax for passing props. Option B is invalid inside component usage.

Practice

1. In Svelte, how do you display a variable's value inside the HTML of a page?

easy

A. Use parentheses like (variable) inside the HTML.

B. Use curly braces like {variable} inside the HTML.

C. Use angle brackets like <variable> inside the HTML.

D. Use quotes like "variable" inside the HTML.

Solution

1. Step 1: Understand Svelte's data binding syntax

   Svelte uses curly braces {} to insert JavaScript expressions or variables into HTML.

2. Step 2: Identify correct syntax for variable display

   Using {variable} inside HTML shows the variable's value dynamically.

3. Final Answer:

   Use curly braces like {variable} inside the HTML. -> Option B

4. Quick Check:

   Display variable = {variable} [OK]

Hint: Remember: curly braces show variables in HTML [OK]

Common Mistakes:

• Using parentheses instead of curly braces
• Trying to use angle brackets for variables
• Putting variable names inside quotes

2. Which of the following is the correct way to declare a variable in a Svelte page's <script> block?

easy

A. const name 'Svelte';

B. var name = 'Svelte';

C. let name = 'Svelte';

D. name = 'Svelte';

Solution

1. Step 1: Recall JavaScript variable declaration in Svelte

   Svelte uses standard JavaScript inside <script>, so let is the preferred way to declare variables that can change.

2. Step 2: Check syntax correctness

   let name = 'Svelte'; correctly declares a variable with a string value.

3. Final Answer:

   let name = 'Svelte'; -> Option C

4. Quick Check:

   Variable declaration = let [OK]

Hint: Use 'let' for variables inside <script> [OK]

Common Mistakes:

• Missing '=' sign in declaration
• Using 'var' which is outdated
• Not declaring variable with let/const

3. Given this Svelte code snippet, what will be rendered on the page?

<script>
  let fruits = ['Apple', 'Banana', 'Cherry'];
</script>

<ul>
  {#each fruits as fruit}
    <li>{fruit}</li>
  {/each}
</ul>

medium

A. AppleBananaCherry

B. fruits

C. Apple, Banana, Cherry (plain text, no list)

D. Syntax error, nothing renders

Solution

1. Step 1: Understand the {#each} block

   The {#each} block loops over the array fruits and creates an <li> for each item.

2. Step 2: Check the output structure

   Each fruit name is inserted inside <li>, so the output is a list with three items.

3. Final Answer:

   <ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul> -> Option A

4. Quick Check:

   Loop over fruits = list items [OK]

Hint: {#each} creates list items for array elements [OK]

Common Mistakes:

• Expecting plain text instead of list
• Misunderstanding {#each} syntax
• Thinking it outputs variable name instead of values

4. What is wrong with this Svelte code snippet?

<script>
  let count = 0
</script>

<button on:click={count++}>Click me</button>
<p>Clicked {count} times</p>

medium

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

B. The event handler syntax is incorrect; it should be a function.

C. The <p> tag cannot use curly braces for variables.

D. There is no problem; the code works fine.

Solution

1. Step 1: Check event handler syntax

   In Svelte, the expression count++ inside on:click is valid and works as an event handler that increments count.

2. Step 2: Confirm no syntax errors

   The code correctly updates count and displays the updated value.

3. Final Answer:

   There is no problem; the code works fine. -> Option D

4. Quick Check:

   Event handler with expression increment works [OK]

Hint: Direct expressions like count++ work as event handlers in Svelte [OK]

Common Mistakes:

• Writing expressions directly in event handlers is invalid
• Using const for variables that change
• Thinking curly braces can't be used in HTML

5. You want to display a list of users with their names and ages on a Svelte page. The data is:

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Carol', age: 35 }
];

Which code snippet correctly shows each user's name and age inside a <div> using {#each}?

hard

A. {#each users as user, index} <div>User {index}: {user.name} ({user.age})</div>{/each}

B. {#each users} <div>{name} is {age} years old</div>{/each}

C. {#each users as user} <div>{name} is {age} years old</div>{/each}

D. {#each users as user} <div>{user} is {age} years old</div>{/each}

Solution

1. Step 1: Understand {#each} syntax with index

   The syntax {#each users as user, index} correctly loops over users and provides both user object and index.

2. Step 2: Check variable usage inside loop

   Inside the loop, {user.name} and {user.age} correctly access properties. Including index shows user number.

3. Final Answer:

   {#each users as user, index} <div>User {index}: {user.name} ({user.age})</div> {/each} -> Option A

4. Quick Check:

   Loop with index and user properties = {#each users as user, index}
<div>User {index}: {user.name} ({user.age})</div>
{/each} [OK]

Hint: Use 'as item, index' to get position and data in {#each} [OK]

Common Mistakes:

• Omitting 'as' keyword in {#each}
• Trying to access properties without user prefix
• Using undefined variables like 'age' alone