Conditional Rendering

Rendering Based on Conditions

React lets you conditionally render components or elements using standard JavaScript operators. There are several patterns — choose the one that makes your code most readable.

All Conditional Rendering Patterns

import { useState } from 'react'

function ConditionalPatterns() {
    const [isLoggedIn, setIsLoggedIn] = useState(false)
    const [role, setRole] = useState('user')
    const [count, setCount] = useState(0)

    // 1. if/else — return early
    if (!isLoggedIn) {
        return (
            <div>
                <p>Please log in</p>
                <button onClick={() => setIsLoggedIn(true)}>Login</button>
            </div>
        )
    }

    return (
        <div>
            {/* 2. Ternary operator — inline if/else */}
            {isLoggedIn
                ? <p>Welcome back!</p>
                : <p>Please log in</p>
            }

            {/* 3. && operator — render only if true */}
            {isLoggedIn && <button onClick={() => setIsLoggedIn(false)}>Logout</button>}

            {/* 4. || operator — fallback */}
            {role || 'guest'}

            {/* 5. Nullish coalescing — only for null/undefined */}
            {role ?? 'No role assigned'}

            {/* 6. Switch-like with object map */}
            {{
                admin: <span className="badge-admin">Admin</span>,
                user:  <span className="badge-user">User</span>,
                mod:   <span className="badge-mod">Moderator</span>,
            }[role] || <span>Unknown role</span>}

            {/* 7. Render null — renders nothing */}
            {count > 10 ? null : <p>Count is low: {count}</p>}

            {/* 8. Component-based conditional */}
            <AdminPanel isAdmin={role === 'admin'} />
        </div>
    )
}

// Conditional component
function AdminPanel({ isAdmin }) {
    if (!isAdmin) return null  // render nothing
    return (
        <div className="admin-panel">
            <h3>Admin Controls</h3>
            <button>Manage Users</button>
        </div>
    )
}

import { useState, useEffect } from 'react'

// Loading / Error / Empty / Data states
function DataComponent({ url }) {
    const [state, setState] = useState({
        data: null,
        loading: true,
        error: null
    })

    useEffect(() => {
        fetch(url)
            .then(res => res.json())
            .then(data => setState({ data, loading: false, error: null }))
            .catch(err => setState({ data: null, loading: false, error: err.message }))
    }, [url])

    const { data, loading, error } = state

    // Pattern: early returns for each state
    if (loading) return <LoadingSpinner />
    if (error)   return <ErrorMessage message={error} />
    if (!data || data.length === 0) return <EmptyState />

    return (
        <ul>
            {data.map(item => <li key={item.id}>{item.title}</li>)}
        </ul>
    )
}

function LoadingSpinner() {
    return (
        <div className="loading">
            <div className="spinner"></div>
            <p>Loading...</p>
        </div>
    )
}

function ErrorMessage({ message }) {
    return (
        <div className="error">
            <p>âš ï¸ Error: {message}</p>
            <button onClick={() => window.location.reload()}>Retry</button>
        </div>
    )
}

function EmptyState() {
    return (
        <div className="empty">
            <p>No items found.</p>
        </div>
    )
}

Previous Next

Conditional Rendering

Rendering Based on Conditions

Ready to Level Up Your Skills?