React Props - Passing Data to Components

Props let you pass data to components, like passing ingredients to a recipe. This makes components dynamic and reusable!

What are Props?

Props (short for "properties") are how you pass data from one component to another.

Think of it like this: - You're giving instructions to someone - Props are the instructions - The component follows those instructions

Simple Props Example

```javascript function Welcome(props) { return <h1>Hello {props.name}!</h1>; }

function App() { return <Welcome name="John" />; } ```

**Result:** "Hello John!"

See what happened? We passed `name="John"` to the Welcome component, and it used that name!

How Props Work

1. You pass props when using a component 2. The component receives props as an argument 3. The component uses the props

```javascript // 1. Pass the prop <Welcome name="John" />

// 2. Receive it function Welcome(props) { // 3. Use it return <h1>Hello {props.name}!</h1>; } ```

Multiple Props

You can pass many props:

```javascript function UserCard(props) { return ( <div> <h2>{props.name}</h2> <p>Age: {props.age}</p> <p>City: {props.city}</p> </div> ); }

function App() { return <UserCard name="Michael" age={25} city="New York" />; } ```

**Result:** ``` Michael Age: 25 City: New York ```

Props with Numbers and Booleans

For numbers and booleans, use curly braces `{ }`:

```javascript <UserCard name="John" // String - no braces needed age={25} // Number - needs braces isStudent={true} // Boolean - needs braces /> ```

Destructuring Props (Easier Way!)

Instead of writing `props.name`, `props.age` every time, you can destructure:

### Before (Long way): ```javascript function UserCard(props) { return <h2>{props.name}</h2>; } ```

### After (Short way): ```javascript function UserCard({ name, age, city }) { return ( <div> <h2>{name}</h2> <p>Age: {age}</p> <p>City: {city}</p> </div> ); } ```

Much cleaner!

Reusing Components with Different Props

This is where props shine! Same component, different data:

```javascript function ProductCard({ name, price, image }) { return ( <div className="card"> <img src={image} alt={name} /> <h3>{name}</h3> <p>Price: ${price}</p> <button>Buy Now</button> </div> ); }

function App() { return ( <div> <ProductCard name="Laptop" price={500} image="laptop.jpg" /> <ProductCard name="Phone" price={300} image="phone.jpg" /> <ProductCard name="Tablet" price={200} image="tablet.jpg" /> </div> ); } ```

One component, three different products!

Props for Styling

You can pass CSS classes or styles as props:

```javascript function Button({ text, color }) { return ( <button style={{ backgroundColor: color }}> {text} </button> ); }

function App() { return ( <div> <Button text="Save" color="green" /> <Button text="Delete" color="red" /> <Button text="Cancel" color="gray" /> </div> ); } ```

Default Props

You can set default values if no prop is passed:

```javascript function Welcome({ name = "Guest" }) { return <h1>Hello {name}!</h1>; }

<Welcome /> // Shows: Hello Guest! <Welcome name="John" /> // Shows: Hello John! ```

Children Prop

There's a special prop called `children` for content inside a component:

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

function App() { return ( <Card> <h2>My Card Title</h2> <p>This is inside the card!</p> </Card> ); } ```

Everything between `<Card>` and `</Card>` becomes `children`!

Props are Read-Only

**Important:** You CANNOT change props inside a component!

❌ **Wrong:** ```javascript function Welcome({ name }) { name = "New Name"; // ❌ Don't do this! return <h1>Hello {name}</h1>; } ```

✅ **Correct:** Props should only be read, not changed. If you need to change data, use State (we'll learn that next!).

Practical Example - Social Media Post

```javascript function Post({ author, time, content, likes }) { return ( <div className="post"> <div className="post-header"> <strong>{author}</strong> <span>{time}</span> </div> <p>{content}</p> <button>👍 {likes} Likes</button> </div> ); }

function App() { return ( <div> <Post author="John Davis" time="2 hours ago" content="Learning React is fun!" likes={10} /> <Post author="Sarah Johnson" time="5 hours ago" content="Just finished my first project!" likes={25} /> </div> ); } ```

Remember

- Props pass data to components - Use props to make components reusable - Props go inside curly braces for numbers/booleans - Destructure props to make code cleaner - Props are read-only (cannot be changed) - Use `children` prop for content inside components

> Next lesson: We'll learn about State - how to make components remember and change data!