Spread props in Svelte - Mini Project: Build & Apply

Using Spread Props in Svelte Components

📖 Scenario: You are building a simple user profile card in Svelte. You want to pass multiple properties to a child component easily without listing each one separately.

🎯 Goal: Create a Svelte component that uses spread props to pass multiple attributes from a parent to a child component efficiently.

📋 What You'll Learn

Create an object with user details

Create a config variable for additional props

Use spread props to pass all user details to a child component

Add a final attribute to the child component for styling

💡 Why This Matters

🌍 Real World

Passing many props to components is common in UI development. Spread props help keep code clean and easy to maintain.

💼 Career

Understanding spread props is useful for frontend developers working with Svelte or similar frameworks to build reusable and flexible components.

1

Create the user data object

Create a variable called user as an object with these exact properties and values: name: 'Alice', age: 30, location: 'New York'

Svelte

# Create a variable called user with name, age, and location
# Your code here

Hint

Use let user = { name: 'Alice', age: 30, location: 'New York' };

2

Add a config variable for extra props

Create a variable called extraProps as an object with the property class set to 'profile-card'

Svelte

let user = { name: 'Alice', age: 30, location: 'New York' };
# Create extraProps object with class 'profile-card'
# Your code here

Hint

Use let extraProps = { class: 'profile-card' };

3

Use spread props in the child component

Create a child component called UserCard.svelte that accepts name, age, and location as props and displays them. Then, in App.svelte, use UserCard and pass all properties from user using spread props syntax {...user}.

Svelte

let user = { name: 'Alice', age: 30, location: 'New York' };
let extraProps = { class: 'profile-card' };

 in App.svelte -->

Hint

Use <UserCard {...user} /> in App.svelte and export props in UserCard.svelte.

4

Add the final attribute for styling

In App.svelte, update the UserCard component to also spread extraProps so it receives the class attribute for styling, using {...extraProps} alongside {...user}.

Svelte

Hint

Use <UserCard {...user} {...extraProps} /> to pass all props including class.

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