⚛️ Rendering Lists with map()

? Quick Overview

In React, the JavaScript map() method is used to transform arrays into lists of JSX elements. This pattern is essential for rendering dynamic data such as menus, tables, cards, and reusable components.

By combining map() with proper key props, you can build efficient and maintainable UIs that update smoothly when data changes.

? Core Pattern: array.map(item => JSX)

? Key Concepts

• map() for JSX: Convert each array element into a React element or component.
• Keys: The key prop uniquely identifies each rendered item for React.
• Rendering Objects: Map over arrays of objects and display selected properties.
• Component Lists: Use map() to render custom components instead of plain HTML.
• Conditional Logic: Combine filter(), conditions, and map() for smart lists.
• Nested Lists: Use nested map() calls for hierarchical data structures.

? Syntax & Theory

The JavaScript map() method creates a new array by applying a callback function to each element:

General form:
newArray = array.map((item, index) => { /* return something */ });

In React, the callback usually returns JSX. Each top-level JSX element in the list should have a key prop so React can track which items were added, removed, or reordered.

? Basic Example: Array of Strings

Suppose you have an array of names and want to display them as a list:

// Render a simple list of names using map()
function NameList() {
const names = ["Alice", "Bob", "Charlie"];

return (
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
);
}

? Rendering Objects

When the array contains objects, you can still use map() and pick which properties to display.

// Render a list of products with name and price
function ProductList() {
const products = [
{ id: 1, name: "Laptop", price: 60000 },
{ id: 2, name: "Phone", price: 25000 },
{ id: 3, name: "Tablet", price: 30000 }
];

return (
<ul>
{products.map((p) => (
<li key={p.id}>{p.name} - ₹{p.price}</li>
))}
</ul>
);
}

? Rendering a List of Components

Instead of rendering plain list items, you can render custom components for cleaner and reusable code:

// Use a reusable Product component inside a mapped list
function Product({ name, price }) {
return <li>{name} — ₹{price}</li>;
}

function ProductList() {
const items = [
{ id: 1, name: "Keyboard", price: 1500 },
{ id: 2, name: "Mouse", price: 800 },
{ id: 3, name: "Monitor", price: 12000 }
];

return (
<ul>
{items.map((item) => (
<Product key={item.id} name={item.name} price={item.price} />
))}
</ul>
);
}

? Conditional Rendering with map()

You can combine filter() and map() (or inline conditions) to show only some items.

// Filter even numbers, then render them as a list
function FilteredList() {
const numbers = [1, 2, 3, 4, 5, 6];

return (
<ul>
{numbers
.filter((n) => n % 2 === 0)
.map((n) => (
<li key={n}>Even: {n}</li>
))}
</ul>
);
}

⚙️ Nested Lists with map()

For hierarchical data (like categories and sub-items), you can nest map() calls:

// Render categories and their nested items
function CategoryList() {
const categories = [
{ id: 1, name: "Electronics", items: ["Phone", "Laptop", "Camera"] },
{ id: 2, name: "Clothing", items: ["Shirt", "Jeans"] }
];

return (
<div>
{categories.map((cat) => (
<div key={cat.id}>
<h5>{cat.name}</h5>
<ul>
{cat.items.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
</div>
))}
</div>
);
}

? Common Use Cases

• Rendering menus, navigation bars, and sidebars from configuration arrays.
• Displaying fetched API data such as products, posts, or comments.
• Generating UI elements like cards, tables, and grids from data.
• Building dashboards with dynamic widgets and stats blocks.