Use of Props

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 <Child name="Naveen" />;
}

function Child(props) {
  return <h1>Hello {props.name}</h1>;
}

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

🔹 Why Props Are Important

1️⃣ Reusability

Same component, different data.

<User name="Naveen" />
<User name="Amit" />
<User name="Riya" />

function User(props) {
  return <p>User Name: {props.name}</p>;
}

✔ One component
✔ Multiple uses
✔ Less code

2️⃣ Make Components Dynamic

Without props → static
With props → dynamic

<Button text="Login" />
<Button text="Register" />

🔹 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 <Child onClick={handleClick} />;
}

function Child(props) {
  return <button onClick={props.onClick}>Click</button>;
}

✔ 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 <p>Hello {name}</p>;
}

🔹 Props with Destructuring (Best Practice)

function User({ name, age }) {
  return (
    <p>
      {name} - {age}
    </p>
  );
}

✔ Cleaner
✔ Readable
✔ Professional

🔹 Passing Multiple Data Types

<User 
  name="Naveen"
  age={22}
  isStudent={true}
  skills={["React", "Node"]}
/>

Props can pass:

• String

• Number

• Boolean

• Array

• Object

• Function

• JSX

🔹 Nested Components & props.children

Example

function Card(props) {
  return <div className="card">{props.children}</div>;
}

function App() {
  return (
    <Card>
      <h1>Hello</h1>
      <p>This is inside Card</p>
    </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.”