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.

Practice

1. What does the spread props syntax {...props} do in a Svelte component?

easy

A. It passes all properties from the props object as individual props to the component.

B. It creates a new component with the name props.

C. It merges two components into one.

D. It removes all props from the component.

Solution

1. Step 1: Understand spread props syntax

   The syntax {...props} takes all key-value pairs from the props object.

2. Step 2: Apply spread props in component

   These key-value pairs are passed as individual props to the component, making them accessible inside.

3. Final Answer:

   It passes all properties from the props object as individual props to the component. -> Option A

4. Quick Check:

   Spread props = pass all object keys as props [OK]

Hint: Spread props pass all object keys as separate props [OK]

Common Mistakes:

• Thinking spread props create a new component
• Confusing spread props with merging components
• Believing spread props remove props

2. Which of the following is the correct self-closing syntax to pass all properties of an object user as props to a Svelte component <Profile />?

easy

A. <Profile {...user}>

B. <Profile {...user} />

C. <Profile {...user};>

D. <Profile {...user}() />

Solution

1. Step 1: Recall spread props syntax in Svelte

   Spread props use {...object} inside the component tag to pass all object keys as props.

2. Step 2: Check correct self-closing tag syntax

   In Svelte, self-closing tags use /> without extra characters or parentheses.

3. Final Answer:

   <Profile {...user} /> -> Option B

4. Quick Check:

   Correct spread syntax + self-closing tag = <Profile {...user} /> [OK]

Hint: Use {...object} inside component tag without extra symbols [OK]

Common Mistakes:

• Adding semicolons inside spread syntax
• Using parentheses after spread props
• Incorrectly closing the component tag

3. Given the code:

  <script>
    let data = {name: 'Alice', age: 30};
  </script>

  <UserCard {...data} age={25} />

What will be the value of age inside UserCard?

medium

A. 30

B. undefined

C. 25

D. Error: Duplicate props

Solution

1. Step 1: Understand spread props and explicit props order

   The spread {...data} passes name: 'Alice' and age: 30 first.

2. Step 2: Recognize explicit prop override

   The explicit prop age={25} comes after spread and overrides the previous age value.

3. Final Answer:

   25 -> Option C

4. Quick Check:

   Explicit props override spread props [OK]

Hint: Explicit props after spread override earlier values [OK]

Common Mistakes:

• Assuming spread props always override explicit props
• Thinking duplicate props cause errors
• Ignoring prop order in component tag

4. Identify the error in this Svelte component usage:

  <script>
    let props = {title: 'Hello'};
  </script>

  <Card {...props} title />

medium

A. Spread props cannot be used with explicit props.

B. The component tag must not be self-closing.

C. The object props must be declared inside the component.

D. Explicit prop title without a value sets it to true.

Solution

1. Step 1: Check explicit prop syntax

   The explicit prop title without a value is treated as title={true} in Svelte.

2. Step 2: Understand Svelte prop override

   This overrides the spread title='Hello' to true.

3. Final Answer:

   Explicit prop title without value sets it to true. -> Option D

4. Quick Check:

   Explicit props need values unless boolean [OK]

Hint: Explicit props must have values unless boolean attributes [OK]

Common Mistakes:

• Thinking spread and explicit props can't be combined
• Assuming missing value is allowed for any prop
• Believing self-closing tags are invalid here

5. You have a Svelte component <Button /> that accepts props type, disabled, and label. You want to pass an object btnProps with {type: 'submit', disabled: false} but override disabled to true and add label as 'Send'. Which is the correct usage?

hard

A. <Button {...btnProps} disabled={true} label='Send' />

B. <Button disabled={true} label='Send' {...btnProps} />

C. <Button label='Send' disabled={true} {...btnProps} />

D. <Button {...btnProps} label='Send'; disabled={true} />

Solution

1. Step 1: Pass base props with spread first

   Use {...btnProps} to pass type and disabled: false.

2. Step 2: Override disabled and add label explicitly

   Explicit props after spread override previous values, so disabled={true} and label='Send' must come after.

3. Step 3: Check order of props

   Only <Button {...btnProps} disabled={true} label='Send' /> places spread first, then explicit props, ensuring correct override.

4. Final Answer:

   <Button {...btnProps} disabled={true} label='Send' /> -> Option A

5. Quick Check:

   Spread first, explicit override after [OK]

Hint: Put spread props first, explicit props after to override [OK]

Common Mistakes:

• Placing explicit props before spread, losing override effect
• Duplicating props in wrong order
• Forgetting to add new props explicitly