Rest parameters in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to collect all remaining props into a rest object.

Svelte

<script>
  export let name;
  export let age;
  export let [1];
</script>

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

Aprops

Brest

C...rest

D...props

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the three dots (...) before the variable name.

Using a variable name without the spread operator.

In Svelte, using 'export let ...rest;' collects all remaining props into the 'rest' object.

2fill in blank

medium

Complete the code to pass all rest props to the <button> element.

Svelte

<script>
  export let label;
  export let [1];
</script>

<button [1]>{label}</button>

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

A...rest

Brest

Cprops

D...props

Attempts:

3 left

💡 Hint

Common Mistakes

Using rest without the spread operator in the element.

Using a different variable name than the exported rest.

Using {...rest} spreads all rest props onto the button element.

3fill in blank

hard

Fix the error in the rest parameter declaration.

Svelte

<script>
  export let name;
  export let age;
  export let [1];
</script>

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

Arest

Bprops

C...props

D...rest

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the three dots in the rest parameter.

Using a variable name without the spread operator.

Rest parameters must use the spread operator '...' before the variable name.

4fill in blank

hard

Fill both blanks to correctly collect and spread rest props in a Svelte component.

Svelte

<script>
  export let title;
  export let [1];
</script>

<h1>{title}</h1>
<button [2]>Click me</button>

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

A...rest

Brest

C...props

D{...rest}

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for export and spread.

Forgetting the spread operator in either place.

Use 'export let ...rest;' to collect rest props and then spread them with '{...rest}' on the element.

5fill in blank

hard

Fill both blanks to create a Svelte component that collects rest props and passes them to a div with a class.

Svelte

<script>
  export let heading;
  export let [1];
</script>

<div class="container" [2]>
  <h2>{heading}</h2>
  <p>Content here</p>
</div>

<style>
  .container {
    padding: 1rem;
    border: 1px solid #ccc;
  }
</style>

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

A...rest

Brest

C...props

D{...rest}

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for export and spread.

Forgetting the spread operator in export or in the element.

Export rest props with '...rest' and spread them on the div using '{...rest}'. The variable name must match.