Spread props in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to spread all props onto the button element.

Svelte

<button [1]>Click me</button>

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

A{...$$props}

B{props}

C{...props}

D{...attributes}

Attempts:

3 left

💡 Hint

Common Mistakes

Using {props} or {attributes} which are not defined in Svelte.

Trying to spread without the three dots.

In Svelte, $$props contains all props passed to the component. Using {...$$props} spreads them onto the element.

2fill in blank

medium

Complete the code to pass all received props to the child component using spread syntax.

Svelte

<ChildComponent [1] />

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

A{...props}

B{props}

C{attributes}

D{...$$props}

Attempts:

3 left

💡 Hint

Common Mistakes

Using {props} or {attributes} which are not recognized in Svelte.

Omitting the spread operator.

To forward all props in Svelte, use {...$$props} on the child component.

3fill in blank

hard

Fix the error in spreading props to an input element.

Svelte

<input type="text" [1] />

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

A{...$$props}

B{...props}

C{props}

D{attributes}

Attempts:

3 left

💡 Hint

Common Mistakes

Using {props} or {attributes} which are undefined.

Forgetting the spread operator.

Only {...$$props} correctly spreads all passed props in Svelte.

4fill in blank

hard

Fill both blanks to spread props and add a class to the div.

Svelte

<div class="container" [1] [2]></div>

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

A{...$$props}

Bclass="extra"

Cclass:extra

Dclass="highlight"

Attempts:

3 left

💡 Hint

Common Mistakes

Using class directives like class:extra instead of class attribute.

Not spreading props before adding class.

Use {...$$props} to spread props and add a class attribute like class="highlight" to the div.

5fill in blank

hard

Fill all three blanks to spread props, add an aria-label, and set a style attribute.

Svelte

<button [1] aria-label=[2] style=[3]>Submit</button>

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

A{...$$props}

B"submit button"

C"color: blue;"

D{props}

Attempts:

3 left

💡 Hint

Common Mistakes

Using {props} which is undefined in Svelte.

Not quoting the aria-label or style values.

Spread props with {...$$props}, set aria-label as a string, and style as a string with CSS rules.