Lesson 4 — Rendering data

Turn data into a list

Pages often show a list from data — blog posts, products. In JSX you use the array method map to turn each item into an element. Each element in a list needs a unique key prop so React can tell items apart when the list changes.

{posts.map((p) => <li key={p}>{p}</li>)}

Note: Next.js pages are React components, so this preview runs your code with plain React in the browser. Next.js-only features (the file router, server rendering, data fetching on the server) are not running here — where a lesson needs them, it shows a small simulation instead.

Why it matters: this is how every content page is built: data in, list of elements out.