28:["$","div",null,{"children":[["$","div","0",{"className":"mb-8","children":["$undefined","$undefined",["$","p",null,{"className":"text-text-dim leading-relaxed mb-4","children":[["$","$1","g0-0",{"children":"Real apps show different things based on state: a list of products, or \"no items yet.\" A logged-in nav, or a sign-in button. A skeleton loader, or the actual content. React handles both with JavaScript expressions inside JSX."}]]}],"$undefined","$undefined","$undefined","$undefined","$undefined","$undefined","$undefined","$undefined"]}],["$","div","1",{"className":"mb-8","children":[["$","h2",null,{"id":"rendering-lists-with-array-map","className":"font-display font-bold text-xl text-text mb-3 scroll-mt-20","children":"Rendering lists with Array.map"}],"$undefined","$undefined","$undefined",["$","div",null,{"className":"mb-4","children":[["$","p",null,{"className":"data-label mb-1.5","children":"Mapping an array to JSX"}],["$","div",null,{"className":"rounded border border-border bg-bg overflow-x-auto","children":["$","pre",null,{"className":"px-4 py-3 text-xs font-mono text-text-dim leading-relaxed whitespace-pre","children":"const products = [\n { id: 1, name: 'Notebook', price: 9.99 },\n { id: 2, name: 'Pen Set', price: 4.99 },\n { id: 3, name: 'Desk Lamp', price: 34.99 },\n]\n\nfunction ProductList() {\n return (\n

\n {product.name} — £{product.price}\n

\n )\n}"}]}]]}],["$","div",null,{"className":"flex gap-3 p-4 rounded border mb-4","style":{"borderColor":"#61DAFB25","background":"#61DAFB06"},"children":[["$","div",null,{"className":"shrink-0 text-lg leading-none mt-0.5","children":"💡"}],["$","div",null,{"children":[["$","p",null,{"className":"text-xs font-semibold mb-0.5","style":{"color":"#61DAFB"},"children":"Array.map is a stamp — press it once per item"}],["$","p",null,{"className":"text-sm text-text-dim leading-relaxed","children":"You have a list of products. You want a ProductCard for each one. Array.map runs a function on every item in the array and returns a new array of JSX elements. React renders all of them. It's the same stamp pressed once for each item in the list."}]]}]]}],["$","div",null,{"className":"flex gap-3 p-4 rounded border border-amber/20 bg-amber-muted/15 mb-4","children":[["$","div",null,{"className":"w-5 h-5 rounded border border-amber/40 bg-amber-muted flex items-center justify-center shrink-0 mt-0.5","children":["$","span",null,{"className":"text-amber text-xs font-bold","children":"!"}]}],["$","div",null,{"children":[["$","p",null,{"className":"text-xs font-semibold text-amber mb-0.5","children":"key is required and must be unique"}],["$","p",null,{"className":"text-sm text-text-dim leading-relaxed","children":"React uses the key prop to track which list items changed between renders. Without a key (or with duplicate keys), React can't efficiently update the list — you'll see bugs and warnings. Always use a stable, unique value like an id. Never use the array index as a key unless the list never reorders."}]]}]]}],"$undefined","$undefined","$undefined","$undefined"]}],["$","div","2",{"className":"mb-8","children":[["$","h2",null,{"id":"conditional-rendering","className":"font-display font-bold text-xl text-text mb-3 scroll-mt-20","children":"Conditional rendering"}],"$undefined","$undefined","$undefined",["$","div",null,{"className":"mb-4","children":[["$","p",null,{"className":"data-label mb-1.5","children":"Three patterns for showing/hiding UI"}],["$","div",null,{"className":"rounded border border-border bg-bg overflow-x-auto","children":["$","pre",null,{"className":"px-4 py-3 text-xs font-mono text-text-dim leading-relaxed whitespace-pre","children":"function Dashboard({ user, isLoading }) {\n // Pattern 1: ternary — one thing or another\n return isLoading ? : \n\n // Pattern 2: && — show something or nothing\n return (\n

\n {user.isPro && }\n {user.unreadMessages > 0 && (\n {user.unreadMessages} new messages\n )}\n

\n )\n\n // Pattern 3: early return — bail out of rendering\n if (!user) return

Please log in

\n return

Welcome, {user.name}

\n}"}]}]]}],"$undefined","$undefined","$L2b","$undefined","$undefined","$undefined"]}],"$L2c"]}]

Lists and Conditional Rendering