🔄 Lesson 2: Props & Data Flow

Learn how data flows from parent to child components through props!

📱

iPhone 15 Pro

$2549.15$2999
Save 15%!
★★★★★(4.8)
✅ In Stock

👤 User Profile

Name:Sarah
Age:25 (Young Adult)
Budget:$1500
Location:New York
💸 Outside budget range

⭐ Reviews for iPhone 15 Pro

TechReviewer99★★★★★

Amazing product! Perfect for professionals.

Sarah_Review★★★★

Great value for money. Rating: 4.8/5. Highly recommend!

🎯 Recommendations for Young Adults (Budget: $1500)

Budget Option

$1784

✅ Within budget

Premium Choice

$3314

❌ Over budget

Young Adult Special

$2294

✅ Within budget

🎯 What You're Changing

  • • Product props: name, price, rating, stock status
  • • User props: name, age, budget, location
  • • Display props: showDiscount, showReviews
  • • Calculated props: discountedPrice, canAfford
  • • Conditional rendering: Components appear based on props

⚛️ Props Concepts

  • • Props: Data passed from parent to child
  • • One-way flow: Data flows down the component tree
  • • Immutable: Child components can't change props
  • • TypeScript: Props have defined types
  • • Destructuring: Extract props in function parameters

📝 How Props Work in Code

1. Passing Props to Components

<ProductCard 
  name="iPhone 15 Pro"
  price={2999}
  rating={4.8}
  inStock={true}
/>

Parent component passes data as props to child components

2. Receiving Props in Component

function ProductCard({ name, price, rating, inStock }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>${price}</p>
      <p>Rating: {rating}/5</p>
      {inStock ? "In Stock" : "Out of Stock"}
    </div>
  );
}

Child component receives props and uses them in JSX

3. TypeScript Props Interface

interface ProductProps {
  name: string;
  price: number;
  rating: number;
  inStock: boolean;
}

TypeScript defines the shape and types of props

🚀 Props Challenge!

  1. 1. Change the productPrice and watch the affordability change
  2. 2. Toggle productInStock to false
  3. 3. Modify userBudget to see different recommendations
  4. 4. Change userAge and see how age group affects content
  5. 5. Try different discount percentages
  6. 6. Turn off showReviews or showRecommendations