setContext 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'

Akey

Buser

C'user'

Dcontext

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the string 'user' directly instead of the variable key.

Using the value object as the key.

The setContext function uses a key variable to identify the context. Here, key holds the string 'user', so it should be passed as the first argument.

2fill in blank

medium

Complete the code to import the correct function for setting context in Svelte.

Svelte

<script>
  import [1] from 'svelte';
</script>

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

AgetContext

BsetContext

CcreateContext

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Importing getContext instead of setContext.

Using React-like function names such as useContext.

To set context in Svelte, you import setContext from 'svelte'.

3fill in blank

hard

Fix the error in the code that tries to set context with a string key directly.

Svelte

<script>
  import { setContext } from 'svelte';
  setContext([1], { name: 'Bob' });
</script>

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

Akey

Buser

C'user'

Dcontext

Attempts:

3 left

💡 Hint

Common Mistakes

Using an undeclared variable as key.

Passing the value object as the key.

The key for setContext can be a string literal like 'user'. Using a variable without declaration causes an error.

4fill in blank

hard

Fill both blanks to set context with a key and a value object.

Svelte

<script>
  import { setContext } from 'svelte';
  const [1] = 'theme';
  const [2] = { color: 'blue' };
  setContext(themeKey, themeValue);
</script>

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

AthemeKey

BthemeValue

Ctheme

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using the string 'theme' as a variable name.

Mismatching variable names between declaration and usage.

The variables themeKey and themeValue are declared and then used in setContext.

5fill in blank

hard

Fill all three blanks to set context with a key, a value, and then retrieve it in a child component.

Svelte

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

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

AauthKey

BauthValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using the value variable as the key in getContext.

Mismatching variable names between set and get.

First, authKey and authValue are declared and used in setContext. Then getContext uses authKey to retrieve the value.