Skip to main content

Posts

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

Difference between ()=> {} and ()=>({})

  (()=>()) 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...

1. What is a JavaScript Array?

  An array is a special variable that can hold multiple values under a single name. Arrays can hold numbers, strings, objects, functions, or even other arrays . Arrays are zero-indexed , meaning the first element is at index 0 . Example: let fruits = [ "Apple" , "Banana" , "Orange" ]; console . log (fruits[ 0 ]); // Apple console . log (fruits[ 2 ]); // Orange 2. Creating Arrays a) Using square brackets [] (most common) let numbers = [ 1 , 2 , 3 , 4 , 5 ]; b) Using Array constructor let colors = new Array ( "Red" , "Green" , "Blue" ); c) Creating an empty array let emptyArr = []; 3. Accessing Array Elements Use index to access elements. let arr = [ "A" , "B" , "C" ]; console . log (arr[ 0 ]); // A console . log (arr[ 2 ]); // C You can also modify elements using the index: arr[ 1 ] = "Z" ; console . log (arr); // ["A", "Z...

1️⃣ Shallow Copy vs Deep Copy

 Yes! In JavaScript , when you perform a deep copy , completely new memory is allocated for the copied object or array, unlike a shallow copy where nested objects still share references. Let me explain in detail. Shallow Copy Only copies the first level of the object/array. Nested objects/arrays are still shared between the original and the copy. Changes in nested objects affect both original and copy. let obj1 = { name : "Alice" , address : { city : "NY" } }; let shallowCopy = { ...obj1 }; // or Object.assign({}, obj1) shallowCopy. address . city = "LA" ; console . log (obj1. address . city ); // Output: "LA" → nested object shared! Notice that changing the nested object in shallowCopy also affects obj1 . Deep Copy Creates a completely independent copy . Nested objects/arrays are also copied to new memory locations . Changing the copy does not affect the original. let obj1 = { name : "Alice"...

Scope in JavaScript

  Scope determines the accessibility of variables, functions, and objects in different parts of your code. In JavaScript, scope can be global, function, block, or module level . 1.1 Types of Scope 1.1.1 Global Scope Variables declared outside any function or block have global scope . Accessible from anywhere in the code. var globalVar = "I am global" ; function showVar ( ) { console . log (globalVar); // Accessible here } showVar (); console . log (globalVar); // Accessible here too 1.1.2 Function Scope Variables declared inside a function using var are function-scoped . Only accessible inside the function. function test ( ) { var x = 10 ; console . log (x); // 10 } console . log (x); // Error: x is not defined 1.1.3 Block Scope Variables declared with let or const inside {} are block-scoped . Only accessible inside that block. { let a = 5 ; const b = 10 ; console . log (a, b); // 5, 10 } console . log (a, b); // ...

✅ Summary: Why URLs give strings, useParams(), and parseInt()

1️⃣ Why URLs give strings? Everything in a URL is text only . When React Router reads a URL, it gives values like "12" , "100" as strings , not numbers. Example: URL: http://localhost:3000/user/15 15 → "15" (string) 2️⃣ What is useParams() ? useParams() is a React Router hook. It returns all dynamic values from the URL. Example: const { id } = useParams (); If your route is: < Route path= "/user/:id" element={ < User />}/> And your URL is /user/10 , then: id === "10" // string 3️⃣ Why do we use parseInt() with useParams() ? Since URL params come as strings , but sometimes we need numbers , we convert them: const { id } = useParams (); const userId = parseInt (id); // "10" → 10 ⭐ Final Combined Example import { useParams } from "react-router-dom" ; function User ( ) { const { id } = useParams (); // id = "5" const userId = parseIn...