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

Need a 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

Need a 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 -->

Need a 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

Need a hint?

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