Lesson 3: Component Props & Passing Data

What Are Props?

Props (short for "properties") are how you pass data from a parent component to a child component. They make components reusable.

Instead of creating 10 different card components, you create 1 card component and pass different props to it.

Example 1: Button Component

💡 These buttons look different but use the same component structure. In a real setup, you'd pass props like: <Button text="Sign Up" variant="primary" />

Example 2: Card Component

Astro Basics

Learn the fundamentals of Astro framework

Beginner

GSAP Animations

Create stunning animations with GSAP

Intermediate

Creative Coding

Build interactive experiences

Advanced

💡 In a real component file, you'd write: <Card title="Astro Basics" description="Learn..." level="Beginner" color="blue" />

Example 3: Different Prop Types

String Props

name="Minh"

Text values wrapped in quotes

Number Props

age={25}

Numbers need curly braces

Boolean Props

isActive={true}

true/false values in curly braces

Array Props

skills={['HTML', 'CSS', 'JS']}

Arrays in curly braces

Object Props

user={{ name: 'Minh', age: 25 }}

Objects with double curlies

How This Would Look in Separate Files

📄 src/components/ProfileCard.astro

---
// Destructure props from Astro.props
const { name, role, skills, isActive = false } = Astro.props;
---

<div class="profile-card">
  <h3>{name}</h3>
  <p>{role}</p>

  {isActive && <span class="badge">Active</span>}

  <ul>
    {skills.map(skill => <li>{skill}</li>)}
  </ul>
</div>

📄 src/pages/team.astro

---
import ProfileCard from '../components/ProfileCard.astro';
---

<ProfileCard
  name="Minh"
  role="Creative Developer"
  skills={['GSAP', 'Astro', 'JavaScript']}
  isActive={true}
/>

<ProfileCard
  name="Sarah"
  role="Designer"
  skills={['Figma', 'Photoshop']}
/>

Astro Props vs React Props

Feature Astro React
Access props Astro.props Function parameters
Destructuring const { name } = Astro.props function Card({ name })
When runs Build time (once) Runtime (on every render)
Props update? No (static after build) Yes (dynamic in browser)
Default values color = "blue" Same: color = "blue"
⚠️ Important: In Astro, props are STATIC after the build. You can't change them in the browser like you can in React. If you need dynamic updates, use a <script> tag or add a React component!

Mental Model: Props Flow

1
Parent Component

Creates child component with props

<Card title="Hello" />
↓
2
Props Travel Down

Data flows from parent to child

title="Hello"
↓
3
Child Component

Receives and uses props

const { title } = Astro.props

Props are one-way: Parent → Child only. Children can't modify props or send data back up (in Astro).

Common Prop Patterns

✅ Pattern 1: Optional Props with Defaults

const { size = "medium", color = "blue" } = Astro.props;

Great for components that should work without all props specified

✅ Pattern 2: Conditional Rendering Based on Props

{showIcon && <Icon />}

Show/hide elements based on prop values

✅ Pattern 3: Spreading Array Props

{items.map(item => <li>{item}</li>)}

Loop through array props to render lists

✅ Pattern 4: Using Props in Styles

background-color: {color};

Apply props as inline styles or class names

What's Next?