When building applications in React, props play a major role in making components reusable, dynamic, and flexible. They allow you to pass data from one component to another — just like arguments to a function.

If you're learning React, understanding props is essential. In this beginner-friendly guide, you’ll learn what props are, why they matter, and how to use them the right way.

⚛️ What Are Props in React?

Props (short for properties) are used to send data from a parent component to a child component.

They are read-only, meaning a child component cannot modify the props it receives.

Think of props as:

Inputs that customize how a component behaves or displays content.

---

🎁 Why Are Props Important?

Props help you:

• 🔹 Pass dynamic data

• 🔹 Reuse components in different ways

• 🔹 Make components flexible and customizable

• 🔹 Keep your app organized and modular

Without props, your UI would be static and repetitive.

---

📦 How Do Props Work?

1️⃣ Parent component sends data

2️⃣ Child component receives data

3️⃣ Child displays or uses that data

---

🧩 Example: Passing Props

✅ Parent Component (App.jsx)

import Welcome from "./Welcome";

function App() {
  return (
    <div>
      <Welcome name="Sagar" />
      <Welcome name="React Developer" />
    </div>
  );
}

export default App;

✅ Child Component (Welcome.jsx)

function Welcome(props) {
  return <h1>Hello, {props.name} 👋</h1>;
}

export default Welcome;

Here’s what happens:

• The parent passes the value "Sagar" as a prop.

• The child component displays it.

• Same component, different outputs — thanks to props!

---

🧠 Destructuring Props

You can simplify your code using destructuring:

function Welcome({ name }) {
  return <h1>Hello, {name} 👋</h1>;
}

This makes the component cleaner and easier to read.

---

🏗️ Passing Multiple Props

You can pass as many props as you want:

<UserProfile name="Anita" age={22} job="Frontend Developer" />

Child component:

function UserProfile({ name, age, job }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Job: {job}</p>
    </div>
  );
}

---

🔄 Props vs State

They work together to build powerful, reactive UI.

---

🚀 Props with Functions

Props are not just data — you can also pass functions as props!

Parent:

function App() {
  const handleClick = () => alert("Button Clicked!");

  return <Button onClick={handleClick} />;
}

Child:

function Button({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

This is how React handles communication from child → parent.

---

🔒 Props Are Immutable

One golden rule:

A child must never change its props.

Bad ❌:

props.name = "John";

Good ✔:

// Use state or callback if you need changes

---

🎨 Default Props

You can assign default values to props:

function Greeting({ name = "Guest" }) {
  return <h1>Welcome, {name}</h1>;
}

---

🎯 Conclusion

Props are one of the core building blocks of React, enabling:

✔ Reusable components
✔ Clean and structured UI
✔ Dynamic and flexible layouts
✔ Smooth parent-to-child data flow

Master props → master component communication → master React.