L5: PropertyList with Array.map()
Learn to render lists dynamically using JavaScript's map() function and understand React keys.
Instead of manually creating a PropertyCard for each property, let's render
them dynamically using JavaScript's .map() method. This is a fundamental React
pattern you'll use constantly!
The Problem: Repetitive Code
Right now, to show all 4 properties, you'd need to write:
<PropertyCard title={properties[0].title} ... />
<PropertyCard title={properties[1].title} ... />
<PropertyCard title={properties[2].title} ... />
<PropertyCard title={properties[3].title} ... />What if you had 100 properties? This approach doesn't scale!
The Solution: Array.map()
JavaScript's .map() method transforms each item in an array:
const numbers = [1, 2, 3];
const doubled = numbers.map((num) => num * 2);
// Result: [2, 4, 6]In React, we map data to JSX components:
const properties = [
{ id: 1, title: "House" },
{ id: 2, title: "Loft" },
];
const cards = properties.map((property) => (
<PropertyCard title={property.title} />
));Step 1: Create PropertyList Component
Let's create a component that handles the list rendering:
// src/components/PropertyList.jsx
import PropertyCard from "./PropertyCard";
function PropertyList({ properties }) {
return (
<div className='property-list'>
{properties.map((property) => (
<PropertyCard
key={property.id}
title={property.title}
location={property.location}
price={property.price}
rating={property.rating}
image={property.image}
/>
))}
</div>
);
}
export default PropertyList;Understanding the Code
Let's break down the mapping logic:
{
properties.map((property) => (
<PropertyCard
key={property.id}
title={property.title}
// ...
/>
));
}(property) => Each item is called property (you can name it anything)
Return JSX For each property, return a PropertyCard component
Pass Props Extract data from property object and pass as props
The Special 'key' Prop
Notice the key prop:
<PropertyCard
key={property.id} // ← Required!
title={property.title}
/>Why is key needed?
React uses keys to identify which items have changed, been added, or removed. This helps React update the DOM efficiently.
Step 2: Use PropertyList in HomePage
Update HomePage to use the new PropertyList component:
// src/pages/HomePage.jsx
import PropertyList from "../components/PropertyList"; // ← NEW
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: Use PropertyList instead of individual cards */}
<PropertyList properties={properties} />
</section>
</div>
);
}
export default HomePage;What Changed?
Imported PropertyList
import PropertyList from '../components/PropertyList';Passed the Entire Array
<PropertyList properties={properties} />We pass the whole array as one prop!
Removed Individual Cards
No more manual <PropertyCard> tags. PropertyList handles all of them!
Component Hierarchy
Your app structure now looks like:
PropertyList is a "container component" that manages the list of PropertyCard children.
Verify in Browser
Save all files and check your browser. You should see:
- Your hero section
- All 4 property cards displayed in a list
- Each card with unique property information
If you see all 4 properties, congratulations! Your dynamic list rendering works! 🎉
Why This Pattern is Powerful
Common Map Mistakes
Practice Challenge
What You Learned
Concepts Mastered- ✅ Using
.map()to render lists dynamically - ✅ Understanding and implementing the
keyprop - ✅ Creating container components (PropertyList)
- ✅ Passing arrays as props
- ✅ Component composition with lists
- ✅ Avoiding common mapping mistakes
Checkpoint ✅
Before moving on, confirm:
- ✅ PropertyList.jsx exists in
src/components/ - ✅ PropertyList is imported and used in HomePage
- ✅ All 4 (or more) properties display as cards
- ✅ Each card has a unique
keyprop - ✅ No console warnings about missing keys
- ✅ Cards look correct with all data
Next Up
Your components work, but they need styling! Next, we'll add Tailwind CSS to make everything look beautiful.