7. What are React Props?

Props (Properties) are the mechanism used to pass data from a parent component down to its children.

They make components Dynamic.
They allow you to reuse the same UI structure with different information.

The Flow:

Parent Component → sends data → Child Component

8. Props Flow Diagram

App Component (Parent)
|
|-- props -->
v
---------------------------
| |
Student Component Student Component
name="Ravi" name="Anu"

The App component controls the data. Each Student component simply receives and displays what it's given.

9. Rules of Props

Rule 1: Read-Only (Immutable)

A child component cannot change its props. They are "Locked."

// Correct ✅
props.name

// Wrong ❌ (This will cause an error)
props.name = "John";

Rule 2: Unidirectional

Data only flows down from Parent to Child.

Rule 3: Attributes

Passed exactly like HTML attributes: <Component key="value" />

10. Props Syntax

Step 1: Passing Props

<Student name="Ravi" age="20" />

Step 2: Receiving Props

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

11. Full Example

Student.js (Child)
export default function Student(props) {
  return (
    <div>
      <h2>Name: {props.name}</h2>
      <p>Age: {props.age}</p>
    </div>
  );
}

App.js (Parent)
import Student from "./Student";

function App() {
  return (
    <div>
      <Student name="Ravi" age="20" />
      <Student name="Anu" age="21" />
    </div>
  );
}

13. Props vs State

Feature	Props	State
Source	From Parent	Inside Component
Editable	No (Read-only)	Yes
Flow	Parent to Child	Internal
Purpose	Pass configuration	Manage changes

15. Modern Destructuring

This is the preferred, cleaner way to write components today.

// Old Way ❌
function Student(props) {
  return <h1>{props.name}</h1>;
}

// Better Way (Destructuring) ✅
function Student({ name, age }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>{age}</p>
    </div>
  );
}

16. Practice Tasks

Task 1: Create Student with Name, Dept, College.

Task 2: Product component: Laptop (Price: 50000).

Task 3: Book component: Name (React Guide), Author (John).

Task 4: Profile Card: Name, Email, Phone.

Challenge: Use the Student component three times in App.js with different names.

17. Learning Flow

Components → JSX → Props (Complete)

↓

Next: State → Events → Hooks