Rendering Lists with the Array map Method

1. Transforming Data Collections into UI

Modern web applications are built around collections of data: lists of products, feeds of social posts, tables of transactions, or directories of courses. In React, you don't write manual for loops to insert DOM elements. Instead, you use JavaScript's functional Array.prototype.map() method to transform an array of data objects into an array of JSX elements.

2. Basic List Rendering

Here is a straightforward example rendering an array of strings:

3. Rendering Arrays of Objects

In enterprise applications, data almost always arrives from APIs as an array of objects. You can map over these objects and extract their properties cleanly:

4. Clean Code: Extracting Child Components

When each list item contains complex markup, multiple event handlers, or local state, inline JSX inside .map() can become difficult to read and maintain.

The industry standard pattern is to extract the item into its own dedicated component:

Note: The key prop must always be placed directly on the element or component returned inside the .map() callback (here, on <CourseCard key={course.id} />), not inside the child component.