React Conditional Rendering ternary &&: Tutorial, Examples, FAQs & Interview Tips

What Is Conditional Rendering?

Conditional rendering means showing different UI depending on a condition. In React, this usually means rendering one element when a value is true, another element when it is false, or nothing at all.

Why It Matters

Real interfaces constantly change based on data. A user might be logged in or logged out. Data might be loading or finished. A list might contain items or be empty. Conditional rendering is how React handles all of these situations cleanly.

Using if Statements

if Statement Example

function WelcomeMessage({ isLoggedIn }) {
    if (isLoggedIn) {
        return <h2>Welcome back!</h2>
    }

    return <h2>Please log in.</h2>
}

Using the Ternary Operator

function Status({ isOnline }) {
    return <p>{isOnline ? 'Online' : 'Offline'}</p>
}

Using the && Operator

function Notification({ hasUnread }) {
    return (
        <div>
            <h3>Inbox</h3>
            {hasUnread && <span>New messages</span>}
        </div>
    )
}

Rendering Nothing

Sometimes a component should not render anything at all. In that case, it can return null.

function Warning({ show }) {
    if (!show) return null
    return <p>Warning: Action required.</p>
}

Loading, Error, and Empty States

One of the most important real-world uses of conditional rendering is handling UI states around data fetching.

function UserList({ loading, error, users }) {
    if (loading) return <p>Loading users...</p>
    if (error) return <p>Something went wrong.</p>
    if (users.length === 0) return <p>No users found.</p>

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

Choosing the Right Pattern

Pattern	Best use case
`if`	Large or multi-branch conditions
Ternary	Short true/false output
`&&`	Render something only when true
`null`	Hide a component completely

Common Mistakes

Mistake	Why it is confusing	Better approach
Overusing nested ternaries	Becomes hard to read quickly	Move complex logic to `if` blocks or helper variables
Using `&&` with values like `0`	Can render unexpected output	Check conditions carefully before using shorthand rendering
Ignoring empty and error states	UI feels incomplete	Handle loading, error, and empty states explicitly

Best Practices

Use the simplest conditional pattern that stays readable
Handle loading, error, and empty states explicitly
Prefer if blocks over deeply nested ternaries
Return null when a component should not render

Summary

Conditional rendering lets React interfaces adapt to changing data and user state. Whether you use if, ternaries, &&, or null, the main goal is to show the right UI for the current situation while keeping the code clear and maintainable.

Key Takeaways

Conditional rendering means showing different UI based on data or conditions.
React commonly uses if statements, ternaries, &&, and null for conditional output.
Loading, error, and empty states are some of the most important real-world conditional rendering cases.
Use the simplest pattern that keeps the code readable.
Avoid deeply nested ternaries when the logic becomes hard to follow.