Passing Props in React (How Components Talk to Each Other)

Why Passing Props Exists

In React:

• Components are isolated
• One component cannot access another’s data directly

So how do they communicate?

👉 Props

---

What Are Props?

Props are inputs to a component.

Think of them like:

• Function parameters
• API request data

---

Simple Example

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

function App() {
  return <Greeting name="John" />;
}

---

What’s Happening?

• App sends data → name="John"
• Greeting receives it → { name }
• UI updates based on props

Backend analogy:

function greeting(name) {
  return `Hello ${name}`;
}

greeting("John");

---

Props Are Read-Only

❌ This is NOT allowed:

props.name = "Mike";

Props are:

• Immutable
• Owned by the parent

If data must change → it belongs in state, not props.

---

Common Beginner Mistake

Trying to store everything in one component.

Correct mindset:

Components should receive data, not own everything.

---

Key Takeaway

Props are how data flows downward in React.

No props → no real app.