React

1. Rendering Lists with Array.prototype.map()

In standard JavaScript, we use for loops or .forEach() to iterate over data. In React JSX, we use .map() because it is a pure expression that transforms an array of raw data objects into a brand-new array of JSX elements.

Standard List Rendering Pattern

function TechStackList() {
    const skills = [
        { id: "s1", name: "JavaScript", level: "Advanced" },
        { id: "s2", name: "React 18", level: "Expert" },
        { id: "s3", name: "TypeScript", level: "Intermediate" }
    ];

    return (
        <div className="skills-container">
            <h3>Engineering Skills</h3>
            <ul className="skills-list">
                {skills.map((skill) => (
                    <li key={skill.id} className="skill-item">
                        <strong>{skill.name}</strong> — <span>{skill.level}</span>
                    </li>
                ))}
            </ul>
        </div>
    );
}

2. The key Prop & Why React Requires It

When rendering dynamic lists, React requires a unique key prop (usually an ID string or number) on the top-level element of each item.

3. The "Array Index as Key" Anti-Pattern

Using the array index key={index} is a common beginner pitfall that can cause severe UI glitches when items are reordered, filtered, or deleted.

4. The 4 Conditional Rendering Techniques

In React, there are 4 standard patterns to conditionally render elements depending on state or props:

if (isLoading) return <Spinner />;
if (hasError) return <ErrorMessage />;
return <DashboardContent />;

<button>
    {isSubscribed ? "Manage Billing" : "Upgrade to Pro"}
</button>

{hasUnreadAlerts && (
    <span className="badge">New!</span>
)}

const STATUS_BADGES = {
    pending: <YellowBadge />,
    shipped: <BlueBadge />,
    delivered: <GreenBadge />
};
return STATUS_BADGES[order.status] || null;

// ❌ BUG: If items.length is 0, this renders "0" on the webpage!
{items.length && <ItemList items={items} />}

// ✅ FIX 1: Explicit boolean comparison (> 0)
{items.length > 0 && <ItemList items={items} />}

// ✅ FIX 2: Double negation (!!) to cast to strict boolean
{!!items.length && <ItemList items={items} />}

// ✅ FIX 3: Ternary with explicit null
{items.length > 0 ? <ItemList items={items} /> : null}

5. Filtering & Sorting Lists Dynamically

Always keep your original array immutable in state, and chain .filter() and .sort() directly in the render function before calling .map():

function ProductCatalog({ products, selectedCategory, maxPrice }) {
    // 1. Filter products by category and budget
    const filteredProducts = products
        .filter(p => selectedCategory === "All" || p.category === selectedCategory)
        .filter(p => p.price <= maxPrice)
        .sort((a, b) => a.price - b.price); // Lowest price first

    // 2. Render filtered list or Empty State
    return (
        <div className="catalog-grid">
            {filteredProducts.length === 0 ? (
                <div className="empty-state">
                    <p>No products match your selected filters.</p>
                </div>
            ) : (
                filteredProducts.map(product => (
                    <div key={product.id} className="product-card">
                        <h4>{product.name}</h4>
                        <p className="price">${product.price}</p>
                    </div>
                ))
            )}
        </div>
    );
}

6. Hands-On Practice Challenges

Sharpen your dynamic list rendering and conditional UI techniques with these hands-on challenges. Click "Solve Challenge" to open the code editor!