Props in React

What are Props?

Props (short for properties) are a way of passing data from one component to another in React — specifically from a parent to a child component.

They allow you to make components reusable and dynamic, by feeding them custom data that they can render or use in logic.

🔧 Why Use Props?

• To make components flexible and reusable
• To communicate between components
• To customize behavior or content

🔁 How Props Work (Concept Flow)

🧱 Basic Example

🧩 Parent Component:

🧩 Child Component (Greeting.js):

🧾 Output:

🔧 Accessing Props

Props are passed as an object to the component:

You can also destructure for cleaner syntax:

🧠 Passing Multiple Props

🔁 Props are Read-Only

You cannot change a prop inside a component. If you try to do this:

Props are meant to receive data, not modify it.

🧪 Dynamic Rendering with Props

You can pass props in loops:

🎯 Real-Life Analogy

Think of a component as a function, and props as its arguments:

Similarly:

🧠 Best Practices

• ✅ Always keep props immutable
• ✅ Use destructuring for cleaner syntax
• ✅ Use PropTypes or TypeScript to enforce prop types (optional)

🛠️ BONUS: Default Props (Optional Values)

🔚 Summary