handle amenity change and checkbox in rent app

 

I’ll explain only the Checkbox part and handleAmenityChange step-by-step in a simple + beginner-friendly way.

---

1️⃣ Amenities state (important to understand first)

amenities: [] as string[]

This means:

• amenities is an array of strings

• It will store selected amenities like:

["wifi", "parking", "gym"]

---

2️⃣ Amenities list (source of checkboxes)

const amenitiesList = ['wifi', 'parking', 'kitchen', 'tv', 'gym', 'pool', 'laundry'];

This array is used to:

• loop

• create one checkbox per amenity

---

3️⃣ Checkbox UI part (main focus)

{amenitiesList.map((amenity) => (
  <div key={amenity} className="flex items-center space-x-2">
    <Checkbox
      id={amenity}
      checked={formData.amenities.includes(amenity)}
      onCheckedChange={(checked) => 
        handleAmenityChange(amenity, checked as boolean)
      }
    />
    <Label htmlFor={amenity} className="text-sm capitalize">
      {amenity === 'wifi' ? 'WIFI' : amenity}
    </Label>
  </div>
))}

🔹 What is happening here?

1. .map() creates multiple checkboxes

For each item in amenitiesList, a checkbox is created.

Example:

• wifi → checkbox

• parking → checkbox

• gym → checkbox

---

2. checked={formData.amenities.includes(amenity)}

This line decides:
👉 Is the checkbox checked or not?

Example:

formData.amenities = ["wifi", "gym"];

• wifi → ✅ checked

• gym → ✅ checked

• parking → ❌ unchecked

Because:

["wifi", "gym"].includes("wifi") // true

---

3. onCheckedChange

onCheckedChange={(checked) => 
  handleAmenityChange(amenity, checked as boolean)
}

• Runs whenever checkbox is clicked

• checked is:

  • true → checkbox selected

  • false → checkbox unselected

We pass:

• amenity → "wifi"

• checked → true / false

---

4️⃣ handleAmenityChange function (core logic)

const handleAmenityChange = (amenity: string, checked: boolean) => {
  if (checked) {
    setFormData(prev => ({
      ...prev,
      amenities: [...prev.amenities, amenity]
    }));
  } else {
    setFormData(prev => ({
      ...prev,
      amenities: prev.amenities.filter(a => a !== amenity)
    }));
  }
};

---

🔹 Case 1: Checkbox is CHECKED ✅

Example: user checks wifi

checked === true

This runs:

amenities: [...prev.amenities, amenity]

If before:

amenities = ["parking"]

After:

amenities = ["parking", "wifi"]

👉 Adds amenity to array

---

🔹 Case 2: Checkbox is UNCHECKED ❌

Example: user unchecks wifi

checked === false

This runs:

amenities: prev.amenities.filter(a => a !== amenity)

If before:

amenities = ["wifi", "gym"]

After:

amenities = ["gym"]

👉 Removes amenity from array

---

5️⃣ Why this approach is GOOD ✅

✔ Controlled component
✔ React state is always source of truth
✔ Easy to send amenities to backend
✔ No duplicate values
✔ Beginner + production friendly

---

6️⃣ Final flow in simple words 🧠

1. User clicks checkbox

2. onCheckedChange fires

3. handleAmenityChange() runs

4. If checked → add amenity

5. If unchecked → remove amenity

6. UI updates automatically