Use of Props

Props stands for properties.
They are used to pass data from a parent component to a child component.

👉 Props make components dynamic, reusable, and configurable.

🔹 Parent → Child Relationship

Props work in one direction only:

Parent Component ➜ Child Component

Example

function Parent() {
  return ;
}

function Child(props) {
  return 
Hello {props.name}
;
}

✔ Parent sends data
✔ Child receives data
❌ Child cannot change props

🔹 Why Props Are Important

1️⃣ Reusability

Same component, different data.

function User(props) {
  return 
User Name: {props.name}
;
}

✔ One component
✔ Multiple uses
✔ Less code

2️⃣ Make Components Dynamic

Without props → static
With props → dynamic

🔹 Props are Read-Only (Very Important)

❌ You cannot modify props inside the child component.

function Child(props) {
  props.name = "New Name"; // ❌ NOT ALLOWED
}

✔ Props are immutable
✔ React enforces one-way data flow

👉 If data must change → use state in parent

🔹 Passing Data Up (Child → Parent)

Props themselves cannot change, but you can pass a function as a prop.

function Parent() {
  const handleClick = () => {
    console.log("Button clicked");
  };

  return ;
}

function Child(props) {
  return Click;
}

✔ Data still flows one-way
✔ Child communicates via callback

🔹 Default Props (Correction Needed)

❌ “props are only set default properties” → Incorrect

✅ Props are values passed from parent
✅ Default props are used only when parent does not pass value

Using default parameters

function User({ name = "Guest" }) {
  return 
Hello {name}
;
}

🔹 Props with Destructuring (Best Practice)

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

      {name} - {age}
    
  );
}

✔ Cleaner
✔ Readable
✔ Professional

🔹 Passing Multiple Data Types

Props can pass:

• String
• Number
• Boolean
• Array
• Object
• Function
• JSX

🔹 Nested Components & props.children

Example

function Card(props) {
  return 
{props.children}
;
}

function App() {
  return (
    
      
Hello
      
This is inside Card
    
  );
}

✔ Nested components
✔ props.children renders inner content
✔ Common in layouts, modals, wrappers

🔹 Props vs State (Quick Comparison)

🔹 Common Interview Mistakes (Avoid These)

❌ “Props can be changed”
❌ “Props are only default values”
❌ “Child updates props directly”

✔ Correct understanding = strong React fundamentals

🔹 One-Line Interview Answer

“Props are read-only data passed from parent to child components in React to make components reusable and dynamic.”