React / React Conditionals
Home /React /React Conditionals

React Conditionals

💻 React

What Are React Conditionals?

Conditional rendering in React is the process of displaying different UI elements  or nothing at all depending on certain conditions (state, props, or logic). React does not have special template directives for conditionals (like Angular’s *ngIf); instead, it leverages plain JavaScript conditional expressions directly inside JSX.

Imagine your 7Scribes LMS: a student who is not logged in sees a login screen, but a student who is logged in sees their course dashboard. That entire UI switch is controlled by conditional rendering. It is one of the most fundamental concepts in React.

Because JSX is just JavaScript, you can use any JavaScript technique to conditionally render content  if/else, ternary operators, logical operators, switch statements, and more. Each technique has its own strengths and ideal use cases.

React Conditional Rendering

Complete cheatsheet: if/else, ternary, &&, ||, ??, switch, IIFE, and component patterns with inline examples.

Pro Tip: Use ternary for simple conditions, && for show/hide, switch for multiple states, and if/else before return for complex logic.
Nullish coalescing (??) prevents falsy pitfalls prefer over || when 0 or ” are valid values.
Golden Rule of Conditional Rendering: Keep JSX readable. If a conditional expression requires scrolling to understand, extract it either into a variable before the return or into its own component. Code is read far more often than it is written.

 

Render null to Render Nothing: Returning null from a component is completely valid in React, it renders nothing and does not leave any DOM node. This is cleaner than rendering an empty <div></div>. Example: if (!shouldShow) return null;

Pattern Code Snippet / Example When to use / Tip
 if / else (before return)
if/else
 
let ui;
if (ok) ui = <A />;
else ui = <B />;
return <div>{ui}</div>;
 Classic pattern

Best for complex logic outside JSX. Full control, avoids inline clutter.
Early return
return
 
if (loading) return <Spin />;
if (error) return <Err />;
return <Main />;
 Guard clause

Prioritise error/loading states. Keeps core rendering clean.
Ternary Operator
? :
 
{isOk
  ? <Success />
  : <Failure />
}
 Recommended

Inline A-or-B rendering. Perfect for simple branching inside JSX.
Logical AND (&&)
&&
 
{isAdmin && <AdminPanel />}

{/* Safe number check: */}
{count > 0 && <Badge />}
 Show/hide

Show-or-nothing pattern. Avoid falsy values like 0 – always use comparison.
Logical OR (||)
 
{name || 'Anonymous'}

{avatar || defaultImg}
 Fallback

Renders fallback when left side is falsy (0, “”, false, null, undefined).
Nullish Coalescing (??)
 
{score ?? 'N/A'}
// 0 stays 0, not replaced

{user?.city ?? 'Unknown'}
 Safer

Fallback only for null / undefined. Perfect for numbers / empty strings.
Switch Statement
 
switch(role){
  case 'admin':
    return <Admin />;
  default:
    return <User />;
}
 Multiple states

Ideal for 3+ discrete states (role, status, theme).
Render null
 
function Comp({ show }) {
  if (!show) return null;
  return <div>Visible</div>
}
 Hide component

Conditionally render nothing, component unmounts in React.