M2: State and Events

Welcome to Module 2! It's time to bring your application to life with interactivity. 🎯

In Module 1, you built a static homepage. Now you'll add state management and event handling to make it dynamic and responsive to user actions.

Overview

State is data that can change over time. When state changes, React automatically updates the UI to reflect those changes. Without state, your app would always look the same!

Events are how users interact with your application - clicking buttons, typing in inputs, selecting options. You'll learn to handle these events and update state accordingly.

What You'll Build

By the end of this module, your homepage will have:

Key Concepts

useState Hook

The useState hook lets you add state to functional components:

import { useState } from "react";

function Counter() {
   const [count, setCount] = useState(0);

   return (
      <div>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
   );
}

Event Handling

React uses camelCase event handlers:

<button onClick={handleClick}>Click Me</button>
<input onChange={handleChange} value={text} />
<form onSubmit={handleSubmit}>...</form>

Controlled Components

Form inputs controlled by React state:

const [name, setName] = useState("");

<input value={name} onChange={(e) => setName(e.target.value)} />;

Learning Objectives

Module Roadmap

Prerequisites

Before starting, ensure:

• ✅ Completed Module 1
• ✅ HomePage displays property listings
• ✅ PropertyCard and PropertyList components working
• ✅ Understand components and props

Quick Refresher

JavaScript Concepts You'll Use

const filtered = array.filter(item => item.price < 100);
const found = array.find(item => item.id === 1);

const result = condition ? 'yes' : 'no';
const value = input || 'default';

onChange={(e) => setValue(e.target.value)}

Let's Begin!

Ready to make your app interactive? Let's start by converting the listings array to state!