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) } /> ...