Lists & Keys
array.map(), JavaScript, ARRAYS, KO, JSX, ELEMENTS, KI, LIST, MEIN, TRANSFORM, KARNE, KA, STANDARD, WAY, hai. HAR, ELEMENT, KO, EK, key PROP, DENA, ZAROORI, hai — React, ISE, USE, KARके, EFFICIENTLY, DECIDE, KARTA, hai, ki, LIST, MEIN, KYA, ADD/REMOVE/REORDER, HUA, hai.
Array, INDEX, KO, key, KI, TARAH, USE, KARNA, RISKY, hai, AGAR, LIST, REORDER/FILTER, HO, SAKTI, hai — React, CONFUSE, HO, SAKTA, hai, ki, KAUN, SA, ITEM, KAUN, SA, hai, JISSE, BUGS (jaise, GALAT, STATE, ASSOCIATION) AA, SAKTE, HAIN. STABLE, UNIQUE, ID (jaise, DATABASE ID), BEST, hai.
function TodoList({ todos }) {
return (
<ul>
{todos.map(todo => (
<li key={todo.id}> {/* array INDEX nahi, stable, unique, id */}
{todo.text}
</li>
))}
</ul>
);
}
// todos = [{ id: 1, text: "Buy milk" }, { id: 2, text: "Walk dog" }]- array.map() = arrays ko, JSX elements ki, LIST mein, TRANSFORM karta hai
- key PROP = React, KO, LIST ITEMS, IDENTIFY, karne mein, HELP karta hai
- Array index, KEY ki, TARAH, RISKY hai, AGAR, LIST, REORDER/FILTER, ho sakti hai
.map() KE, ANDAR, INLINE, JSX, KE, BAJAYE, EK, SEPARATE, COMPONENT, (jaise, TodoItem) EXTRACT, KARNA, BEST, PRACTICE, hai — key, PROP, PARENT, .map() call, PAR, LAGТI, hai, NA, KI, INNER, COMPONENT, PAR.
{todos.map(todo => <TodoItem key={todo.id} todo={todo} />)}array.filter().map(), EK, COMMON, PATTERN, hai — PEHLE, FILTER, KARKE, RELEVANT, ITEMS, NIKALO, PHIR, MAP, KARKE, JSX, MEIN, CONVERT, KARO. YE, DUSRI, ORDER, MEIN, (map, PEHLE, filter, BAAD), bhi, KAAM, KARTA, hai, LEKIN, filter-then-map, ZYAADA, READABLE, hai.
{items.filter(i => i.active).map(i => <Item key={i.id} item={i} />)}