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

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

// 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:

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 { }:

<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):

function UserCard(props) {
  return <h2>{props.name}</h2>;
}

After (Short way):

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:

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:

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:

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:

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:

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

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!