svelte:component for dynamic components - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render a dynamic component using svelte:component.

Svelte

<script>
  import Button from './Button.svelte';
  let current = [1];
</script>

<svelte:component this={current} />

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

Abutton

BButton

CComponent

Dcurrent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string like 'Button' instead of the imported component variable.

Using lowercase 'button' which is an HTML tag, not a Svelte component.

You assign the imported component Button to the variable current. Then svelte:component uses this={current} to render it dynamically.

2fill in blank

medium

Complete the code to switch the dynamic component based on a condition.

Svelte

<script>
  import A from './A.svelte';
  import B from './B.svelte';
  let useA = true;
  let current = useA ? [1] : B;
</script>

<svelte:component this={current} />

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

AA

BB

CuseA

Dcurrent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string 'A' instead of the imported component variable.

Using the variable useA instead of the component.

The ternary operator chooses A if useA is true, otherwise B. So current must be assigned A or B.

3fill in blank

hard

Fix the error in the code to correctly pass props to the dynamic component.

Svelte

<script>
  import Card from './Card.svelte';
  let current = Card;
  let title = 'Hello';
</script>

<svelte:component this={current} [1] />

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

Atitle

Btitle:title

Ctitle={title}

Dtitle=>title

Attempts:

3 left

💡 Hint

Common Mistakes

Passing props without curly braces, which treats them as strings.

Using incorrect syntax like title:title.

Props are passed like HTML attributes in Svelte. Use title={title} to pass the variable title as a prop.

4fill in blank

hard

Fill both blanks to render a dynamic component with a fallback if the component is null.

Svelte

<script>
  import X from './X.svelte';
  let current = [1];
</script>

{#if current}
  <svelte:component this={current} />
[2]
{/if}

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

AX

B<p>No component selected</p>

C<p>Loading...</p>

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning null to current without fallback.

Using fallback text outside the {#if} block.

Assign X to current. Use an {#if} block to check if current exists. If not, show fallback text like <p>No component selected</p>.

5fill in blank

hard

Fill all three blanks to create a dynamic component that updates on button click.

Svelte

<script>
  import One from './One.svelte';
  import Two from './Two.svelte';
  let current = [1];
  function toggle() {
    current = current === One ? [2] : One;
  }
</script>

<button on:click=[3]>Toggle</button>
<svelte:component this={current} />

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

AOne

BTwo

Ctoggle

Dtoggle()

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the function immediately with toggle() instead of passing the function reference.

Using strings instead of component variables.

Start with current = One. The toggle function switches between One and Two. The button's click event uses on:click={toggle} to call the function.