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.