L4: PropertyCard Component with Props
Build a reusable PropertyCard component and learn how to pass data with props.
Time to create your first reusable component! The PropertyCard will display
individual property information and introduce you to props - React's way of
passing data between components.
What Are Props?
Props (short for "properties") are how you pass data from a parent component to a child component. Think of them like function arguments:
// Function with parameters
function greet(name) {
return `Hello, ${name}!`;
}
// Component with props
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
// Usage
<Greeting name='Sarah' />;Props make components reusable - same component, different data!
Step 1: Create the PropertyCard Component
Create a new file in the components folder:
Add this code:
function PropertyCard({ title, location, price, rating, image }) {
return (
<div className='property-card'>
<img src={image} alt={title} />
<div className='property-info'>
<h3>{title}</h3>
<p className='location'>{location}</p>
<div className='property-footer'>
<span className='price'>${price} / night</span>
<span className='rating'>⭐ {rating}</span>
</div>
</div>
</div>
);
}
export default PropertyCard;Understanding Props Destructuring
Let's break down the component signature:
function PropertyCard({ title, location, price, rating, image }) {
// ...
}This is destructuring the props object. It's equivalent to:
function PropertyCard(props) {
const title = props.title;
const location = props.location;
const price = props.price;
// ... and so on
// Then use: {title}, {location}, etc.
}Destructuring is cleaner! We extract the values we need directly in the parameters.
Step 2: Use PropertyCard in HomePage
Now let's use the PropertyCard. Update your HomePage:
import PropertyCard from "../components/PropertyCard"; // ← NEW: Import
function HomePage() {
const properties = [
{
id: 1,
title: "Cozy Beach House",
location: "Malibu, California",
price: 250,
rating: 4.9,
image: "https://images.unsplash.com/photo-1499793983690-e29da59ef1c2?w=800",
},
{
id: 2,
title: "Modern Downtown Loft",
location: "New York, NY",
price: 180,
rating: 4.7,
image: "https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?w=800",
},
{
id: 3,
title: "Mountain Cabin Retreat",
location: "Aspen, Colorado",
price: 320,
rating: 5.0,
image: "https://images.unsplash.com/photo-1518732714860-b62714ce0c59?w=800",
},
{
id: 4,
title: "Lakefront Villa",
location: "Lake Tahoe, Nevada",
price: 400,
rating: 4.8,
image: "https://images.unsplash.com/photo-1566073771259-6a8506099945?w=800",
},
];
return (
<div className='home-page'>
<header className='hero'>
<h1>Find Your Perfect Stay</h1>
<p>Discover amazing places to stay around the world</p>
</header>
<section className='listings'>
<h2>Featured Properties</h2>
{/* ← NEW: Using PropertyCard */}
<PropertyCard
title={properties[0].title}
location={properties[0].location}
price={properties[0].price}
rating={properties[0].rating}
image={properties[0].image}
/>
</section>
</div>
);
}
export default HomePage;How Props Work
When you write:
<PropertyCard
title='Cozy Beach House'
location='Malibu, California'
price={250}
/>React creates a props object:
{
title: "Cozy Beach House",
location: "Malibu, California",
price: 250
}And passes it to the PropertyCard function!
Props Syntax Rules
String Props
Use quotes for strings:
<PropertyCard title='Beach House' />Number Props
Use curly braces for numbers:
<PropertyCard price={250} />Variable Props
Use curly braces for variables:
const propertyTitle = "Beach House";
<PropertyCard title={propertyTitle} />Object Properties as Props
Access object properties:
<PropertyCard title={properties[0].title} />Verify in Browser
Save your files and check the browser. You should see:
- Your hero section
- "Featured Properties" heading
- One property card displaying the first property
The card should show:
- Property image
- Title: "Cozy Beach House"
- Location: "Malibu, California"
- Price: "$250 / night"
- Rating: "⭐ 4.9"
Why This is Powerful
The same PropertyCard component can display different properties:
// Same component, different data!
<PropertyCard title="Beach House" price={250} />
<PropertyCard title="City Loft" price={180} />
<PropertyCard title="Mountain Cabin" price={320} />Write once, use everywhere! This is the core principle of component-based architecture.
Component Composition
Look at your component hierarchy now:
We're building a tree of components, each handling a specific piece of the UI!
Props vs. State
Common Props Mistakes
Practice Challenge
Try these exercises:
What You Learned
Concepts Mastered- ✅ Creating reusable components
- ✅ Passing data with props
- ✅ Destructuring props in function parameters
- ✅ Using props in JSX
- ✅ Understanding props vs state (conceptually)
- ✅ Component composition patterns
- ✅ Importing and using custom components
Checkpoint ✅
Before continuing, ensure:
- ✅ PropertyCard.jsx file exists in
src/components/ - ✅ PropertyCard is imported in HomePage
- ✅ At least one property card displays in the browser
- ✅ The card shows image, title, location, price, and rating
- ✅ No console errors
Next Up
You've mastered props! Next, we'll create a PropertyList component that uses
.map() to display all properties dynamically. No more manual duplication!