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) } /> ...
(()=>()) and (()=>{}) are different because: ()=>() — parentheses mean an expression with an implicit return ()=>{} — curly braces mean a function body, so you must use return yourself Let’s break it down. 1️⃣ ()=>() — implicit return (expression) Whatever is inside the parentheses is automatically returned . const add = ( a, b ) => (a + b); console . log ( add ( 2 , 3 )); // 5 No return keyword needed. This is often used when returning simple values. 2️⃣ ()=>{} — block body (no implicit return) Curly braces mean it's a normal function body . So this: const add = ( a, b ) => { a + b }; console . log ( add ( 2 , 3 )); // undefined returns undefined , because there is no return statement . To return, you must write: const add = ( a, b ) => { return a + b; }; ⚠️ Special case: returning an object Because {} means “function body”, if you try: const getUser = ( ) => { name : "Ayush" }; This is t...