📋 Rendering Lists with map()

The `map()` function is the primary way to transform arrays into lists of React elements.

Basic List Rendering

function TodoList() {
  const todos = ["Learn React", "Build Projects", "Master Hooks"];

  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
}

Rendering Object Arrays

function UserList() {
  const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
    { id: 3, name: "Charlie" }
  ];

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

Mapping with JSX Components

function ProductGrid() {
  const products = [
    { id: 1, name: "Laptop", price: 999 },
    { id: 2, name: "Phone", price: 599 }
  ];

  return (
    <div className="grid">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

function ProductCard({ product }) {
  return (
    <div>
      <h3>{product.name}</h3>
      <p>${product.price}</p>
    </div>
  );
}

Common Map Patterns

Nested Mapping

function NestedLists() {
  const categories = [
    { id: 1, name: "Fruits", items: ["Apple", "Banana"] },
    { id: 2, name: "Veggies", items: ["Carrot", "Broccoli"] }
  ];

  return (
    <div>
      {categories.map(category => (
        <div key={category.id}>
          <h2>{category.name}</h2>
          <ul>
            {category.items.map((item, i) => (
              <li key={i}>{item}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

✅ Key Takeaways

• Use **map()** to transform arrays into JSX elements

• Always use a **key prop** (preferably unique ID)

• Return **JSX from map** callback

• Access **index** as second parameter if needed