Context key patterns in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Svelte

<script>
  import { setContext } from 'svelte';
  const key = 'user';
  const user = { name: 'Alice' };
  setContext([1], user);
</script>

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

AcontextKey

B'user'

Ckey

DUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string literal instead of the variable key.

Using an undefined variable as the key.

You use the variable key as the context key when calling setContext.

2fill in blank

medium

Complete the code to get a context value in a Svelte component.

Svelte

<script>
  import { getContext } from 'svelte';
  const key = 'theme';
  const theme = getContext([1]);
</script>

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

Akey

BcontextKey

CTheme

D'theme'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string literal instead of the variable.

Using an undefined variable.

You retrieve the context value using the variable key which holds the context key.

3fill in blank

hard

Fix the error in the code to correctly share context between components.

Svelte

<script>
  import { setContext, getContext } from 'svelte';
  const key = Symbol('settings');
  setContext(key, { darkMode: true });
  const settings = getContext([1]);
</script>

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

Akey

B'settings'

CSymbol('settings')

DsettingsKey

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of the Symbol variable.

Creating a new Symbol in getContext.

The same key variable holding the Symbol must be used in both setContext and getContext.

4fill in blank

hard

Fill both blanks to create and use a unique context key with Symbol.

Svelte

<script>
  import { setContext, getContext } from 'svelte';
  const [1] = [2]('auth');
  setContext(authKey, { loggedIn: false });
  const auth = getContext(authKey);
</script>

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

AauthKey

BSymbol

Ckey

DcreateSymbol

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of Symbol.

Using an undefined function like createSymbol.

Use authKey as the variable name and Symbol to create a unique key.

5fill in blank

hard

Fill all three blanks to set and get context using a constant key string.

Svelte

<script>
  import { setContext, getContext } from 'svelte';
  const [1] = '[2]';
  setContext([3], { language: 'en' });
  const lang = getContext(langKey);
</script>

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

AlangKey

Blanguage

Dlocale

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for key.

Using inconsistent strings for the key.

Define langKey as the constant key variable, assign it the string language, and use langKey in setContext.