Array and object reactivity gotchas in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to update the array reactively in Svelte.

Svelte

let items = [1, 2, 3];

function addItem() {
  items = [...items, [1]];
}

Drag options to blanks, or click blank then click option'

Aitems.push(4)

B4

Citems[3]

Ditems.length

Attempts:

3 left

💡 Hint

Common Mistakes

Using items.push(4) without reassigning items.

Trying to modify items[3] directly without reassignment.

In Svelte, to update an array reactively, you create a new array with the new item. Using items = [...items, 4] triggers reactivity.

2fill in blank

medium

Complete the code to update an object property reactively in Svelte.

Svelte

let user = { name: 'Alice', age: 25 };

function updateAge() {
  user = { ...user, [1] };
}

Drag options to blanks, or click blank then click option'

Auser.age = user.age + 1

Bage += 1

Cage: user.age + 1

Duser = { age: user.age + 1 }

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign to user.age directly without reassigning user.

Replacing the whole user object without copying existing properties.

To update an object reactively in Svelte, create a new object with the updated property using spread syntax.

3fill in blank

hard

Fix the error in the code to make the array update reactive in Svelte.

Svelte

let numbers = [1, 2, 3];

function addNumber() {
  numbers.push(4);
  [1];
}

Drag options to blanks, or click blank then click option'

Anumbers = [...numbers]

Bnumbers = numbers.push(4)

Cnumbers.push(4)

Dnumbers = numbers

Attempts:

3 left

💡 Hint

Common Mistakes

Reassigning numbers to itself without creating a new array.

Assigning numbers to the result of push, which is a number.

After pushing to the array, reassigning it with a new array copy triggers Svelte's reactivity.

4fill in blank

hard

Fill both blanks to create a reactive filtered array in Svelte.

Svelte

let allItems = [1, 2, 3, 4, 5];

$: filtered = allItems.[1](item => item [2] 3);

Drag options to blanks, or click blank then click option'

Afilter

B>

C<

Dmap

Attempts:

3 left

💡 Hint

Common Mistakes

Using map instead of filter.

Using the wrong comparison operator.

Using filter with a condition item > 3 creates a reactive filtered array.

5fill in blank

hard

Fill all three blanks to create a reactive object property update in Svelte.

Svelte

let settings = { theme: 'light', fontSize: 14 };

function increaseFont() {
  settings = { ...settings, [1]: settings.[2] + [3] };
}

Drag options to blanks, or click blank then click option'

AfontSize

C1

Dtheme

Attempts:

3 left

💡 Hint

Common Mistakes

Updating the wrong property.

Forgetting to spread the old settings.

To update the fontSize reactively, spread the old settings and set fontSize to its current value plus 1.