Understanding Props in React ⚛️

When building applications in React, components are the heart of everything. But how do components communicate with each other?
That’s where Props come in.

What are Props in React?

Props (short for properties) are used to pass data from one component to another, usually from a parent component to a child component.

👉 Props make components dynamic, reusable, and flexible.

Think of props like arguments passed to a function.

Why Do We Need Props?

• To share data between components
• To make components reusable
• To avoid hardcoding values
• To keep components clean and modular

Example of Props in React
Parent Component
function App() {
return (
<User name="Ponvel" role="React Developer" />
);
}

Child Component
function User(props) {
return (
<div>
<h2>Name: {props.name}</h2>
<p>Role: {props.role}</p>
</div>
);
}

📌 Here:

• name and role are props
• App is the parent
• User is the child

Props are Read-Only 🛑

One important rule in React:

❌ Props cannot be modified by the child component

props.name = "New Name"; // ❌ Not allowed

Props are immutable, meaning they are only for reading.Using Destructuring with Props (Best Practice)

Instead of writing props.name again and again, we can destructure:

function User({ name, role }) {
return (

{name}

{role}

);
}

✅ Cleaner
✅ More readable
✅ Preferred in real projects