Spread props in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Svelte component render?

Consider this Svelte component using spread props:

<script>
  let props = { id: 'btn1', class: 'primary', disabled: true };
</script>

<button {...props}>Click me</button>

What will be the rendered output in the browser?

A <button id="btn1" class="primary" disabled>Click me</button>

B <button id="btn1" class="primary">Click me</button>

C <button disabled>Click me</button>

D <button>Click me</button>

💡 Hint

Remember how boolean attributes like disabled behave in HTML.

The spread operator passes all properties from props as attributes. The disabled attribute is boolean and appears without a value when true.

📝 Syntax

intermediate

Which spread syntax is correct in Svelte?

Which of the following is the correct way to spread props in a Svelte component?

A <Component {props} />

B <Component {...props} />

C <Component ...props />

D <Component {..props} />

💡 Hint

Think about how JavaScript spread syntax looks inside JSX-like attributes.

The correct syntax uses three dots inside curly braces: {...props}. Other options are invalid in Svelte.

🔧 Debug

advanced

Why does this spread cause an error?

Given this Svelte snippet:

<script>
  let props = null;
</script>

<input type="text" {...props} />

What error will this cause and why?

A ReferenceError because props is undefined

B SyntaxError due to invalid spread syntax

C TypeError because you cannot spread null

D No error, renders input without extra props

💡 Hint

Think about what spreading a non-object value does in JavaScript.

Spreading expects an object. Spreading null causes a TypeError at runtime.

❓ state_output

advanced

What is the final class attribute value?

Look at this Svelte component:

<script>
  let base = { class: 'btn' };
  let extra = { class: 'primary' };
</script>

<button {...base} {...extra}>Press</button>

What will be the value of the class attribute on the button?

A primary

B btn primary

C btn

D btnprimary

💡 Hint

Later spread props overwrite earlier ones.

The second spread {...extra} overwrites the class from {...base}, so only 'primary' remains.

🧠 Conceptual

expert

How does Svelte handle spread props with reactive updates?

Consider this Svelte code:

<script>
  let props = { title: 'Hello' };
  $: props = { ...props, title: 'Hi' };
</script>

<h1 {...props}>Welcome</h1>

What will be the rendered title attribute on the <h1> element after reactive update?

A An error occurs

B Hello

C undefined

D Hi

💡 Hint

Reactive statements update variables and trigger re-render.

The reactive statement updates props to have title: 'Hi'. The spread uses the latest props, so the attribute is 'Hi'.

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