React Learning

 Let's see if I've got this right — here's my recap of the last three "aha" moments:

1. Passing a function vs. calling one — onChange={changeName} hands React a reference to the function (React calls it later); onChange={(e) => changeName(e)} wraps it in a new function. You only need the wrapper when you must pass extra args the event itself doesn't carry (like onClick={() => handleEdit(row.userId)}).

2. Curly braces {} in JSX — JSX is literal text/markup by default; {} is the escape hatch that says "evaluate this as real JavaScript and insert the result." Like Razor's @, but stricter — JSX only accepts expressions (things that produce a value), never full statements like loops or if blocks. That's exactly why .map() exists — it's an expression that returns a new array, unlike a for loop which is a statement.

3. The key prop / list reconciliation — React needs a stable way to match "this element before" to "this element now" across re-renders. key={index} (or no key at all, which silently defaults to index) ties identity to position, which breaks the moment items get added/removed/reordered — you literally watched values shuffle onto the wrong fruit. The fix: key by something tied to the item's actual identity (key={fruit} here; key={user.userId} in real data), so React can track the item correctly no matter where it moves.