Spread props in Svelte

Introduction

Spread props let you pass many properties to a component quickly. It saves time and keeps your code clean.

You want to pass all properties from an object to a component without listing each one.

You have a set of common props shared by many components.

You want to forward all received props to a child component.

You want to keep your component calls simple and readable.

You want to dynamically pass props based on an object.

Syntax

Svelte

<Component {...props} />

The {...props} syntax spreads all key-value pairs from the props object as individual props.

You can combine spread props with other props. Later props override earlier ones.

Examples

Passes all properties from buttonProps object to the Button component.

Svelte

<Button {...buttonProps} />

Passes all inputProps but explicitly sets type to "text". The explicit type overrides any type in inputProps.

Svelte

<Input {...inputProps} type="text" />

Spreads a new object inline to pass title and content props.

Svelte

<Card {...{title: 'Hello', content: 'World'}} />

Sample Program

This example shows how to pass multiple props from an object props to a Child component using spread props. The child receives each property as a separate prop and displays them.

Svelte

<script>
  import Child from './Child.svelte';

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

<Child {...props} />

<!-- Child.svelte -->
<script>
  export let name;
  export let age;
  export let city;
</script>

<p>Name: {name}</p>
<p>Age: {age}</p>
<p>City: {city}</p>

Important Notes

Spread props make your code shorter but be careful not to pass unwanted props.

If you spread props and also set the same prop explicitly, the explicit one wins.

Use spread props to forward all props from a parent to a child component easily.

Summary

Spread props let you pass many props from an object quickly.

You can combine spread props with explicit props; explicit ones override.

They help keep your component calls clean and flexible.

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