svelte:self for recursive components - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render a recursive component using svelte:self.

Svelte

<script>
  export let depth = 0;
</script>

{#if depth < 3}
  <svelte:[1] depth={depth + 1} />
{/if}

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

Acomponent

Bself

Cchild

Dparent

Attempts:

3 left

💡 Hint

Common Mistakes

Using svelte:component instead of svelte:self.

Trying to use a custom tag name like child or parent.

The svelte:self tag allows a component to include itself recursively.

2fill in blank

medium

Complete the code to pass the updated depth prop to the recursive call.

Svelte

<script>
  export let depth = 0;
</script>

{#if depth < 5}
  <svelte:self depth=[1] />
{/if}

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

Adepth + 1

Bdepth

Cdepth * 2

Ddepth - 1

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the same depth value causing infinite recursion.

Decreasing depth which may cause unexpected behavior.

To go deeper in recursion, increase the depth by 1 each time.

3fill in blank

hard

Fix the error in the recursive component to avoid infinite recursion by adding a base case condition.

Svelte

<script>
  export let depth = 0;
</script>

{#if depth [1] 3}
  <svelte:self depth={depth + 1} />
{/if}

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

A>

B==

C>=

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using > or >= causing the recursion to never stop.

Using == which only runs at one depth level.

The recursion should continue only if depth is less than 3 to stop infinite loops.

4fill in blank

hard

Fill both blanks to create a recursive list where each item renders its children using svelte:self.

Svelte

<script>
  export let node;
</script>

<li>
  {node.name}
  {#if node.children && node.children.length [1] 0}
    <ul>
      {#each node.children as child}
        <svelte:[2] node={child} />
      {/each}
    </ul>
  {/if}
</li>

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

A>

Bself

C<

Dcomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using < instead of > in the condition.

Using svelte:component instead of svelte:self.

The condition checks if children length is greater than 0, and svelte:self renders the same component recursively.

5fill in blank

hard

Fill all three blanks to correctly implement a recursive tree component with depth limit and recursive call.

Svelte

<script>
  export let node;
  export let depth = 0;
</script>

{#if depth [1] 2}
  <li>
    {node.name}
    {#if node.children && node.children.length [2] 0}
      <ul>
        {#each node.children as child}
          <svelte:[3] node={child} depth={depth + 1} />
        {/each}
      </ul>
    {/if}
  </li>
{/if}

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

A<

B>

Cself

Dcomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using > instead of < for depth condition.

Using svelte:component instead of svelte:self.

Using < instead of > for children length check.

The recursion continues while depth is less than 2, children length is greater than 0, and svelte:self calls the same component recursively.