🎁 What are Props? — The Foundation of Component Communication

Props are how React components communicate with each other. They're the way you pass information from one component to another—like function parameters, but for components.

🎯 Understanding Props

Props are properties you pass to a component, like function arguments. They let you customize how a component behaves so you can reuse it in different contexts without duplicating code.

Here's a simple example: imagine you want to display greetings to different users. Instead of creating separate components for each person, you create one component that accepts a name as a prop:

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

<Greeting name="Alice" />  // Outputs: Hello, Alice!
<Greeting name="Bob" />    // Outputs: Hello, Bob!

<details>

<summary>📚 More Examples</summary>

// Function parameters work similarly
function greet(name) {
  return `Hello, ${name}!`;
}
greet("Alice");  // Hello, Alice!

// React props use the same concept
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}
<Greeting name="Alice" />  // Hello, Alice!

</details>

💡 Props are Immutable

An important rule: you cannot change props inside a component. Props are read-only. This is a fundamental React principle that keeps your code predictable.

function Card({ title }) {
  // ❌ Wrong - don't do this!
  // title = "New Title";

  // ✅ Correct - just use the prop
  return <div>{title}</div>;
}

🎨 Real-World Example: A Button Component

Instead of creating separate `SaveButton`, `DeleteButton`, and `EditButton` components, you create one reusable Button component that accepts props:

function Button({ text, color }) {
  return <button style={{ background: color }}>{text}</button>;
}

// Now use it many ways without duplicating code
<Button text="Save" color="green" />
<Button text="Delete" color="red" />
<Button text="Edit" color="blue" />

📊 Props vs State Summary

🔑 Key Takeaways

• ✅ Props are how you pass data to React components

• ✅ Props are like function parameters for components

• ✅ Props are immutable—you cannot change them

• ✅ Props make components flexible and reusable

• ✅ Props flow from parent components to child components

• ✅ Use props to customize component behavior without duplication

Ready to practice? Challenges | Next: Passing Props to Components