L3: Adding Property Data

Now that we have a HomePage component, let's add some actual property data to display. You'll learn how to work with JavaScript arrays and objects inside React components.

Current State

Right now, the HomePage shows placeholder text: "Property listings will go here...". We need real property data to display!

Understanding the Data Structure

Each property in our booking app needs several pieces of information:

{
  id: 1,
  title: "Cozy Beach House",
  location: "Malibu, California",
  price: 250,
  rating: 4.9,
  image: "https://images.unsplash.com/photo-1..."
}

Why these fields?

• id - Unique identifier (we'll need this later for React keys)
• title - Property name
• location - Where it is
• price - Cost per night
• rating - Average guest rating
• image - Photo URL

Step 1: Create the Properties Array

Update your HomePage.jsx to include property data:

function HomePage() {
   // Property data array
   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>
            <p>We have {properties.length} properties available</p>
         </section>
      </div>
   );
}

export default HomePage;

What Changed?

1. Added Property Data

const properties = [
  { id: 1, title: "...", ... },
  { id: 2, title: "...", ... },
  // ... more properties
];

This creates an array of objects. Each object represents one property with all its details.

2. Used JavaScript in JSX

<p>We have {properties.length} properties available</p>

The curly braces {} let you use JavaScript inside JSX:

• properties.length is a JavaScript expression
• It evaluates to 4 (the number of items in the array)
• React renders it as plain text

Why Define Data Inside the Component?

JavaScript in JSX Rules

You can use any JavaScript expression inside {}:

const name = "StayScape";
<h1>{name}</h1>
// Renders: <h1>StayScape</h1>

const price = 250;
<p>${price * 7} per week</p>
// Renders: <p>$1750 per week</p>

const title = "beach house";
<h2>{title.toUpperCase()}</h2>
// Renders: <h2>BEACH HOUSE</h2>

const rating = 4.9;
<span>{rating >= 4.5 ? "⭐ Superhost" : "Host"}</span>
// Renders: <span>⭐ Superhost</span>

What you CAN'T use:

• ❌ if/else statements (use ternary instead)
• ❌ for loops (use .map() instead - next lesson!)
• ❌ Multi-line statements (use expressions)

Understanding the Data

Let's break down one property object:

{
  id: 1,                    // Unique number
  title: "Cozy Beach House", // String
  location: "Malibu, CA",    // String
  price: 250,                // Number
  rating: 4.9,               // Number (decimal)
  image: "https://..."       // String (URL)
}

Data Types Matter:

• Numbers don't need quotes: price: 250
• Strings need quotes: title: "Beach House"
• Use consistent formatting for readability

Verify in Browser

Save your file and check the browser. You should see:

• "Find Your Perfect Stay" heading
• "We have 4 properties available" text

The number 4 comes from properties.length!

Practice Challenge

Try these modifications to practice working with the data:

What You Learned

• ✅ Creating JavaScript arrays and objects
• ✅ Defining data inside components
• ✅ Using expressions in JSX with {}
• ✅ Accessing object properties (properties.length)
• ✅ Structuring realistic data models
• ✅ Understanding data types in JavaScript

Common Mistakes

Checkpoint ✅

Before moving on, confirm:

• ✅ Your HomePage has a properties array with 4 items
• ✅ The page shows "We have 4 properties available"
• ✅ No errors in the browser console
• ✅ You understand how to use {} in JSX

Next Up

Great! You have property data. Next, we'll create a PropertyCard component to display individual properties using props.