Most real interfaces show a list of something — products, comments, lessons. React renders lists with plain JavaScript's .map(), the array method from the JavaScript Arrays lesson, not a special template loop syntax.
function FruitList() {
const fruits = ['apple', 'banana', 'mango'];
return (
<ul>
{fruits.map((fruit) => (
<li>{fruit}</li>
))}
</ul>
);
}The curly braces around .map(...) work exactly like embedding any other expression, from the JSX lesson — .map() here returns an array of <li> elements, and React renders an array of elements just fine.
Running the code above logs a console warning: "Each child in a list should have a unique key prop." React needs a stable key on each item to correctly track which item is which across re-renders — without it, React can only guess by position, which causes real bugs when a list gets reordered, filtered, or has an item removed from the middle.
function FruitList() {
const fruits = ['apple', 'banana', 'mango'];
return (
<ul>
{fruits.map((fruit) => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);
}A key needs to be a string or number that's unique among siblings, and stable across re-renders — a database ID or a slug is ideal:
function StudentList({ students }) {
return (
<ul>
{students.map((student) => (
<li key={student.id}>{student.name}</li>
))}
</ul>
);
}Index as key is a trap, not a shortcut
Using the array index as a key (fruits.map((fruit, i) => <li key={i}>)) works, but only safely when the list never reorders, filters, or has items inserted/removed anywhere but the end. Reordering with index keys causes React to mismatch state to the wrong item after the reorder — a real, easy-to-miss bug. Use a real, stable ID whenever the data has one.
key is metadata for React itself, not something your component can read — props.key is always undefined. If a component needs the same value for its own logic, pass it again under a different name.