Props in React

# Props in React

1. Introduction #

2. Learning Objectives #

• Define what Props are in React.

• Pass data (strings, numbers, arrays, objects) from a Parent component to a Child component.

• Access and display props inside a component.

• Use ES6 destructuring to write cleaner prop code.

• Understand that props are read-only.

3. Beginner-Friendly Explanations #

What are Props? #

In React, you do the exact same thing with your custom components: <UserProfile name="Alex" age="28" /> Here, name and age are Props.

The Flow of Data #

4. Syntax Explanation #

Step 1: Passing Props (Parent Component) #

```jsx id="ch6_ex1" // Example React component (Parent) function App() { return ( <div> <Greeting userName="Sarah" age={25} isOnline={true} /> <Greeting userName="John" age={32} isOnline={false} /> </div> ); }

### Step 2: Receiving Props (Child Component)
The child component receives **one** argument: an object containing all the props passed to it. By convention, we name this argument `props`.

jsx id="ch6_ex2" // Example React component (Child) function Greeting(props) { return ( <div className="card"> <h2>Hello, {props.userName}!</h2> <p>Age: {props.age}</p> </div> ); }

## 5. Destructuring Props (The Modern Way)
Writing `props.propertyName` over and over gets tedious. Modern React code uses ES6 Destructuring to extract the variables directly in the function parameters.

jsx id="ch6_ex3" // Example React component (Child with Destructuring) // Instead of (props), we write ({ userName, age }) const Greeting = ({ userName, age }) => { return ( <div className="card"> <h2>Hello, {userName}!</h2> <p>Age: {age}</p> </div> ); }

This is much cleaner!

## 6. Output Explanations
When `App` renders, it calls `Greeting` twice.
1. The first `Greeting` receives `{userName: "Sarah", age: 25}` and renders "Hello, Sarah! Age: 25".
2. The second receives `{userName: "John", age: 32}` and renders "Hello, John! Age: 32".
**We wrote the UI code once, but rendered two unique cards!**

## 7. Real-World Examples
Think of a Twitter (X) feed. Every tweet looks exactly the same in terms of layout (profile pic on the left, name at top, text in middle, buttons at bottom). 
Twitter has a single `<Tweet />` component. When loading your feed, it loops through the database and creates a `<Tweet />` for every post, passing the data as props:
`<Tweet author="Elon" text="Hello World" likes={1000} />`

## 8. Common Mistakes
- **Trying to change props:** Props are **Read-Only**. A child component cannot change the props passed to it. Writing `props.userName = "Bob";` inside the child will cause an error. If data needs to change over time, you use State (Chapter 7), not Props.
- **Forgetting curly braces for non-strings:** `<AgeCard age="25" />` passes a string. `<AgeCard age={25} />` passes a number. It matters!

## 9. Best Practices
- Always destructure your props. It makes it immediately obvious to other developers what data your component requires just by looking at the function signature.
- Use descriptive prop names. `buttonText` is better than `text`.

## 10. Exercises
1. Create an `Employee` component that accepts `firstName`, `lastName`, and `department` as props.
2. Render three `Employee` components inside an `App` component with different data.

## 11. Mini Project: Reusable User Card Component
Let's build a highly reusable UI component using Tailwind CSS and Props.

jsx id="ch6_proj1" // Example React component

// 1. The Child Component const UserCard = ({ name, role, email, avatarUrl, isActive }) => { return ( <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex items-center gap-4 hover:shadow-md transition-shadow"> {/* Avatar with an online status indicator */} <div className="relative"> <img src={avatarUrl} alt={name} className="w-16 h-16 rounded-full object-cover border-2 border-gray-100" /> {/* Conditional rendering for the green/gray dot based on isActive prop */} <span className={absolute bottom-0 right-0 w-4 h-4 rounded-full border-2 border-white ${isActive ? 'bg-green-500' : 'bg-gray-400'}}></span> </div>

{/* User Info */} <div> <h3 className="text-lg font-bold text-gray-900">{name}</h3> <p className="text-sm font-medium text-blue-600">{role}</p> <p className="text-sm text-gray-500 mt-1">{email}</p> </div> </div> ); };

// 2. The Parent Component export default function TeamDirectory() { return ( <div className="max-w-3xl mx-auto p-8"> <h1 className="text-3xl font-black text-gray-800 mb-8">Our Team</h1> {/* Reusing the component 3 times with different data! */} <div className="grid gap-4"> <UserCard name="Alice Johnson" role="Lead Engineer" email="alice@techcorp.com" avatarUrl="https://i.pravatar.cc/150?img=1" isActive={true} /> <UserCard name="Mark Smith" role="UI Designer" email="mark@techcorp.com" avatarUrl="https://i.pravatar.cc/150?img=11" isActive={false} />

<UserCard name="Dr. Sarah Lee" role="Data Scientist" email="sarah@techcorp.com" avatarUrl="https://i.pravatar.cc/150?img=5" isActive={true} /> </div> </div> ); } ``

Q2: Which syntax is correct for destructuring props in the function parameters? A) const Card = (props.title, props.desc) => {} B) const Card = [title, desc] => {} C) const Card = ({ title, desc }) => {} D) const Card = {title, desc} => {} *Answer: C*

17. Next Chapter Recommendation #