Context with stores in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a writable store in Svelte.

Svelte

import { [1] } from 'svelte/store';

const count = [1](0);

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

Areadable

Bderived

Cwritable

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using readable instead of writable when you want to update the store.

Forgetting to import the store function.

The writable function creates a store you can update and subscribe to.

2fill in blank

medium

Complete the code to set a context value with a store in a Svelte component.

Svelte

import { setContext } from 'svelte';
import { writable } from 'svelte/store';

const count = writable(0);

setContext('[1]', count);

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

Acount

BstoreCount

CcontextCount

DcountStore

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name instead of a string as the context key.

Mismatching the context key between setContext and getContext.

The key used in setContext should match the name you want to identify the store by. Here, 'count' is used as the key.

3fill in blank

hard

Fix the error in the child component to get the store from context and subscribe to it.

Svelte

import { getContext } from 'svelte';

const count = getContext([1]);

count.subscribe(value => {
  console.log(value);
});

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

AcountStore

Bcount

C"count"

D'count'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a variable instead of a string literal as the context key.

Using double quotes inconsistently.

The getContext function requires the exact string key used in setContext. It must be a string literal like 'count'.

4fill in blank

hard

Fill both blanks to create a derived store from a context store and use it in the component.

Svelte

import { getContext } from 'svelte';
import { [1] } from 'svelte/store';

const count = getContext('count');
const doubled = [2](count, $count => $count * 2);

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

Aderived

Bwritable

Creadable

Dsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Using writable or readable instead of derived.

Not importing derived from the correct module.

The derived function creates a new store based on another store's value. You import and use derived here.

5fill in blank

hard

Fill all three blanks to update a context store value inside a component.

Svelte

import { getContext } from 'svelte';

const count = getContext('count');

function increment() {
  count.[1](n => n [2] 1);
}

<button on:click=[3]>Increment</button>

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

Aupdate

B+

Cincrement

Dset

Attempts:

3 left

💡 Hint

Common Mistakes

Using set instead of update when incrementing.

Not matching the function name in the button's click handler.

The update method changes the store value based on the current value. The function increment is called on button click.