Lists & Dynamic Rendering

When building the POS system's inventory interface, I wasn't displaying one or two products—I was rendering hundreds of menu items, retail products, and variations across multiple restaurant locations and retail stores. Hardcoding each <ProductCard /> would have been impossible. I needed to dynamically generate UI from data arrays.

This is where React's list rendering becomes critical. Whether you're displaying 10 products or 10,000, the pattern is the same.

The Problem: Too Much Repetition

Imagine rendering just 5 products manually:

function ProductCatalog() {
  return (
    <div>
      <ProductCard name="Mohinga" price={3500} stock={24} category="Breakfast" />
      <ProductCard name="Shan Noodles" price={4000} stock={15} category="Lunch" />
      <ProductCard name="Tea Leaf Salad" price={3000} stock={0} category="Appetizer" />
      <ProductCard name="Samosa" price={1500} stock={45} category="Snack" />
      <ProductCard name="Mandalay Noodles" price={3800} stock={12} category="Lunch" />
    </div>
  );
}

Now imagine 500 products. Impossible to maintain. What if prices change? What if you need to add a product?

The Solution: Map Over Arrays

JavaScript's .map() method transforms arrays. In React, we use it to transform data arrays into component arrays:

// ProductCatalog.tsx
import React from 'react';
import ProductCard from './ProductCard';

interface Product {
  id: string;
  name: string;
  price: number;
  stock: number;
  category: string;
}

function ProductCatalog() {
  const products: Product[] = [
    { id: '1', name: 'Mohinga', price: 3500, stock: 24, category: 'Breakfast' },
    { id: '2', name: 'Shan Noodles', price: 4000, stock: 15, category: 'Lunch' },
    { id: '3', name: 'Tea Leaf Salad', price: 3000, stock: 0, category: 'Appetizer' },
    { id: '4', name: 'Samosa', price: 1500, stock: 45, category: 'Snack' },
    { id: '5', name: 'Mandalay Noodles', price: 3800, stock: 12, category: 'Lunch' },
  ];
  
  return (
    <div className="product-catalog">
      {products.map(product => (
        <ProductCard 
          key={product.id}
          name={product.name}
          price={product.price}
          stock={product.stock}
          category={product.category}
        />
      ))}
    </div>
  );
}

export default ProductCatalog;

What's happening:

1. products.map() iterates over each product

2. For each product, we return a <ProductCard /> component

3. We spread the product data as props

4. key={product.id} helps React track which items changed (more on this soon)

Understanding Keys

Notice the key prop? It's required when rendering lists. Let's understand why.

Why Keys Matter

When your list changes (items added, removed, or reordered), React needs to figure out what changed. Keys help React identify which items changed.

Without keys:

{products.map(product => (
  <ProductCard {...product} /> // ⚠️ Warning: Each child should have a unique "key"
))}

With keys:

{products.map(product => (
  <ProductCard key={product.id} {...product} /> // ✅ Good
))}

Key Rules

✅ Use unique, stable IDs

key={product.id} // ✅ Perfect - unique database ID

❌ Don't use array index (usually)

{products.map((product, index) => (
  <ProductCard key={index} {...product} /> // ⚠️ Can cause bugs
))}

Why is index bad? If items reorder, the index changes, but React thinks it's the same item. This causes bugs with state and performance issues.

When index is okay: If your list never reorders, filters, or changes, index is fine. But 99% of the time, use IDs.

Real Example from POS System

In my POS, products come from the Inventory Service with UUIDs:

const products = [
  { id: 'uuid-1a2b3c', name: 'Mohinga', price: 3500, stock: 24, category: 'Breakfast' },
  { id: 'uuid-4d5e6f', name: 'Shan Noodles', price: 4000, stock: 15, category: 'Lunch' },
  // ... hundreds more
];

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

Passing Whole Objects as Props

Instead of spreading individual properties, pass the entire object:

// Before: Individual props
<ProductCard 
  key={product.id}
  name={product.name}
  price={product.price}
  stock={product.stock}
  category={product.category}
/>

// After: Whole object (cleaner)
<ProductCard 
  key={product.id}
  product={product}
/>

The ProductCard component receives it:

interface ProductCardProps {
  product: Product;
}

function ProductCard({ product }: ProductCardProps) {
  return (
    <div>
      <h3>{product.name}</h3>
      <p>{product.price} MMK</p>
      {/* ... */}
    </div>
  );
}

Filtering Lists

In the POS system, users filter products by category, availability, or price range. This is just array filtering before rendering:

// ProductCatalog.tsx
import React, { useState } from 'react';
import ProductCard from './ProductCard';

interface Product {
  id: string;
  name: string;
  price: number;
  stock: number;
  category: string;
}

function ProductCatalog() {
  const [selectedCategory, setSelectedCategory] = useState<string>('all');
  
  const products: Product[] = [
    { id: '1', name: 'Mohinga', price: 3500, stock: 24, category: 'Breakfast' },
    { id: '2', name: 'Shan Noodles', price: 4000, stock: 15, category: 'Lunch' },
    { id: '3', name: 'Tea Leaf Salad', price: 3000, stock: 0, category: 'Appetizer' },
    { id: '4', name: 'Samosa', price: 1500, stock: 45, category: 'Snack' },
    { id: '5', name: 'Mandalay Noodles', price: 3800, stock: 12, category: 'Lunch' },
  ];
  
  // Filter products based on selected category
  const filteredProducts = selectedCategory === 'all' 
    ? products 
    : products.filter(p => p.category === selectedCategory);
  
  return (
    <div>
      <div className="category-filter">
        <button onClick={() => setSelectedCategory('all')}>All</button>
        <button onClick={() => setSelectedCategory('Breakfast')}>Breakfast</button>
        <button onClick={() => setSelectedCategory('Lunch')}>Lunch</button>
        <button onClick={() => setSelectedCategory('Appetizer')}>Appetizer</button>
        <button onClick={() => setSelectedCategory('Snack')}>Snack</button>
      </div>
      
      <div className="product-grid">
        {filteredProducts.map(product => (
          <ProductCard 
            key={product.id}
            product={product}
          />
        ))}
      </div>
      
      {filteredProducts.length === 0 && (
        <p>No products found in this category.</p>
      )}
    </div>
  );
}

export default ProductCatalog;

The pattern:

1. Store filter state (selectedCategory)

2. Filter the array before mapping: products.filter(...)

3. Map over the filtered array

4. Show empty state if no results

Multiple Filters

Real-world apps often have multiple filters. Here's a more complex example from the POS:

function ProductCatalog() {
  const [categoryFilter, setCategoryFilter] = useState<string>('all');
  const [stockFilter, setStockFilter] = useState<'all' | 'inStock' | 'lowStock'>('all');
  const [priceRange, setPriceRange] = useState<'all' | 'under3k' | '3k-5k' | 'over5k'>('all');
  
  const products: Product[] = [ /* ... */ ];
  
  // Chain filters
  let filteredProducts = products;
  
  // Category filter
  if (categoryFilter !== 'all') {
    filteredProducts = filteredProducts.filter(p => p.category === categoryFilter);
  }
  
  // Stock filter
  if (stockFilter === 'inStock') {
    filteredProducts = filteredProducts.filter(p => p.stock > 5);
  } else if (stockFilter === 'lowStock') {
    filteredProducts = filteredProducts.filter(p => p.stock > 0 && p.stock <= 5);
  }
  
  // Price filter
  if (priceRange === 'under3k') {
    filteredProducts = filteredProducts.filter(p => p.price < 3000);
  } else if (priceRange === '3k-5k') {
    filteredProducts = filteredProducts.filter(p => p.price >= 3000 && p.price <= 5000);
  } else if (priceRange === 'over5k') {
    filteredProducts = filteredProducts.filter(p => p.price > 5000);
  }
  
  return (
    <div>
      {/* Filter UI */}
      <div className="filters">
        {/* Category buttons */}
        {/* Stock buttons */}
        {/* Price buttons */}
      </div>
      
      <p>{filteredProducts.length} products found</p>
      
      <div className="product-grid">
        {filteredProducts.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

Sorting Lists

In the POS admin panel, I needed to sort products by name, price, or stock level:

function ProductCatalog() {
  const [sortBy, setSortBy] = useState<'name' | 'price' | 'stock'>('name');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
  
  const products: Product[] = [ /* ... */ ];
  
  // Create a sorted copy (don't mutate original)
  const sortedProducts = [...products].sort((a, b) => {
    let comparison = 0;
    
    if (sortBy === 'name') {
      comparison = a.name.localeCompare(b.name);
    } else if (sortBy === 'price') {
      comparison = a.price - b.price;
    } else if (sortBy === 'stock') {
      comparison = a.stock - b.stock;
    }
    
    return sortOrder === 'asc' ? comparison : -comparison;
  });
  
  return (
    <div>
      <div className="sort-controls">
        <select onChange={(e) => setSortBy(e.target.value as any)}>
          <option value="name">Sort by Name</option>
          <option value="price">Sort by Price</option>
          <option value="stock">Sort by Stock</option>
        </select>
        
        <button onClick={() => setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc')}>
          {sortOrder === 'asc' ? '↑ Ascending' : '↓ Descending'}
        </button>
      </div>
      
      <div className="product-grid">
        {sortedProducts.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

Important: [...products].sort() creates a copy before sorting. Never mutate props or state directly!

Nested Lists

Sometimes you need nested lists. In the POS, products are grouped by category:

interface ProductsByCategory {
  category: string;
  products: Product[];
}

function GroupedProductCatalog() {
  const productsByCategory: ProductsByCategory[] = [
    {
      category: 'Breakfast',
      products: [
        { id: '1', name: 'Mohinga', price: 3500, stock: 24, category: 'Breakfast' },
        { id: '2', name: 'Shan Khauk Swe', price: 3200, stock: 18, category: 'Breakfast' },
      ]
    },
    {
      category: 'Lunch',
      products: [
        { id: '3', name: 'Shan Noodles', price: 4000, stock: 15, category: 'Lunch' },
        { id: '4', name: 'Mandalay Noodles', price: 3800, stock: 12, category: 'Lunch' },
      ]
    }
  ];
  
  return (
    <div>
      {productsByCategory.map(group => (
        <div key={group.category} className="category-section">
          <h2>{group.category}</h2>
          
          <div className="product-grid">
            {group.products.map(product => (
              <ProductCard 
                key={product.id} 
                product={product} 
              />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

Key points:

• Outer loop uses category as key

• Inner loop uses product.id as key

• Each level needs unique keys within its scope

Conditional Rendering in Lists

Display different components based on data:

function ProductList() {
  const products: Product[] = [ /* ... */ ];
  
  return (
    <div>
      {products.map(product => {
        // Out of stock? Show different component
        if (product.stock === 0) {
          return (
            <OutOfStockCard 
              key={product.id}
              product={product}
            />
          );
        }
        
        // Low stock? Show warning version
        if (product.stock < 5) {
          return (
            <LowStockProductCard 
              key={product.id}
              product={product}
            />
          );
        }
        
        // Default
        return (
          <ProductCard 
            key={product.id}
            product={product}
          />
        );
      })}
    </div>
  );
}

Empty States

Always handle empty lists gracefully:

function ProductCatalog() {
  const products: Product[] = [ /* ... */ ];
  
  if (products.length === 0) {
    return (
      <div className="empty-state">
        <h2>No Products Found</h2>
        <p>There are no products available at the moment.</p>
      </div>
    );
  }
  
  return (
    <div className="product-grid">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Or inline:

<div className="product-grid">
  {products.length === 0 ? (
    <p>No products available.</p>
  ) : (
    products.map(product => (
      <ProductCard key={product.id} product={product} />
    ))
  )}
</div>

Complete Example: POS Product Catalog

Here's the full implementation from the POS system:

// ProductCatalog.tsx
import React, { useState } from 'react';
import ProductCard from './ProductCard';
import styles from './ProductCatalog.module.css';

interface Product {
  id: string;
  name: string;
  price: number;
  stock: number;
  category: string;
  imageUrl?: string;
}

function ProductCatalog() {
  const [categoryFilter, setCategoryFilter] = useState<string>('all');
  const [sortBy, setSortBy] = useState<'name' | 'price'>('name');
  const [showOutOfStock, setShowOutOfStock] = useState(true);
  
  // In real app, this comes from API
  const products: Product[] = [
    { id: '1', name: 'Mohinga', price: 3500, stock: 24, category: 'Breakfast' },
    { id: '2', name: 'Shan Noodles', price: 4000, stock: 15, category: 'Lunch' },
    { id: '3', name: 'Tea Leaf Salad', price: 3000, stock: 0, category: 'Appetizer' },
    { id: '4', name: 'Samosa', price: 1500, stock: 45, category: 'Snack' },
    { id: '5', name: 'Mandalay Noodles', price: 3800, stock: 12, category: 'Lunch' },
    { id: '6', name: 'Shan Khao Swe', price: 3200, stock: 0, category: 'Breakfast' },
  ];
  
  // Get unique categories
  const categories = ['all', ...new Set(products.map(p => p.category))];
  
  // Filter products
  let filteredProducts = products;
  
  if (categoryFilter !== 'all') {
    filteredProducts = filteredProducts.filter(p => p.category === categoryFilter);
  }
  
  if (!showOutOfStock) {
    filteredProducts = filteredProducts.filter(p => p.stock > 0);
  }
  
  // Sort products
  const sortedProducts = [...filteredProducts].sort((a, b) => {
    if (sortBy === 'name') {
      return a.name.localeCompare(b.name);
    } else {
      return a.price - b.price;
    }
  });
  
  return (
    <div className={styles.container}>
      <div className={styles.controls}>
        <div className={styles.filters}>
          <label>Category:</label>
          {categories.map(category => (
            <button
              key={category}
              onClick={() => setCategoryFilter(category)}
              className={categoryFilter === category ? styles.active : ''}
            >
              {category}
            </button>
          ))}
        </div>
        
        <div className={styles.sortControls}>
          <label>Sort by:</label>
          <select value={sortBy} onChange={(e) => setSortBy(e.target.value as any)}>
            <option value="name">Name</option>
            <option value="price">Price</option>
          </select>
          
          <label>
            <input 
              type="checkbox" 
              checked={showOutOfStock}
              onChange={(e) => setShowOutOfStock(e.target.checked)}
            />
            Show out of stock items
          </label>
        </div>
      </div>
      
      <p className={styles.count}>{sortedProducts.length} products found</p>
      
      {sortedProducts.length === 0 ? (
        <div className={styles.emptyState}>
          <h2>No Products Found</h2>
          <p>Try adjusting your filters.</p>
        </div>
      ) : (
        <div className={styles.productGrid}>
          {sortedProducts.map(product => (
            <ProductCard 
              key={product.id}
              product={product}
            />
          ))}
        </div>
      )}
    </div>
  );
}

export default ProductCatalog;

Key Learnings

✅ List Rendering Pattern

{array.map(item => (
  <Component key={item.id} data={item} />
))}

✅ Keys Are Required

• Use unique, stable IDs

• Don't use array index (usually)

• Keys must be unique among siblings

✅ Filter Before Mapping

const filtered = products.filter(p => p.category === 'Lunch');
return <div>{filtered.map(...)}</div>

✅ Sort Creates New Array

const sorted = [...products].sort(...); // ✅ Creates copy
products.sort(...); // ❌ Mutates original

✅ Always Handle Empty States

• Show helpful message when array.length === 0

• Guide users on what to do next

Common Mistakes I Made

❌ Forgetting keys

{products.map(p => <ProductCard product={p} />)} // ⚠️ Warning

❌ Using index as key with dynamic lists

{products.map((p, i) => <ProductCard key={i} {...p} />)} // ⚠️ Bugs

❌ Mutating array before rendering

products.sort(...); // ❌ Mutates props/state
return products.map(...);

❌ Not handling empty arrays

// No empty state = confused users

Next Steps

We can now render dynamic lists of products, but users still can't search or filter by typing. In the POS system, the search bar is the most-used feature—users type product names to find items quickly.

Next, we'll learn about forms and user input, building a search interface with controlled components and validation.

Continue to: Forms & User Input