React Conditional Rendering and Lists

Conditional rendering patterns

React has several patterns for conditionally showing content.

function Dashboard({ user, loading, error }) {
    // Early return
    if (loading) return <Spinner />;
    if (error)   return <ErrorMessage error={error} />;

    return (
        <div>
            {/* Ternary: show one or the other */}
            {user.isAdmin ? <AdminPanel /> : <UserPanel />}

            {/* && operator: show or show nothing */}
            {user.notifications.length > 0 && (
                <NotificationBadge count={user.notifications.length} />
            )}

            {/* Conditional className */}
            <button className={user.isActive ? 'active' : 'inactive'}>
                Status
            </button>
        </div>
    );
}

Rendering lists with map()

Use Array.map() to render a list of elements from data.

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

// Conditional rendering within a list
{users.map(user => (
    <li key={user.id}>
        {user.name}
        {user.isAdmin && <span className="badge">Admin</span>}
    </li>
))}

The key prop — why it matters

React uses keys to identify which items have changed, been added, or removed. Without stable keys, React may reuse the wrong DOM nodes.

// BAD: using index as key causes bugs when list order changes
{items.map((item, index) => (
    <Item key={index} data={item} />
))}

// GOOD: use stable, unique IDs
{items.map(item => (
    <Item key={item.id} data={item} />
))}

// Why index keys cause bugs:
// List: [A(0), B(1), C(2)]
// Remove A → [B(0), C(1)]
// React thinks B is still key=0 (item A) and just changed
// This can cause wrong component state to persist

Exam tip

Two common interview traps: (1) {count && <X />} renders "0" when count is 0 — always use {count > 0 && <X />}. (2) Index as key causes stale state in reordered lists — always use stable IDs.