Conditional Rendering

Most real UIs show different content depending on state: an empty list message when there is nothing to show, a warning when the user has over-budgeted, a different button label based on a toggle. React handles all of this with plain JavaScript — no special directives.

The ternary operator

The most common pattern for conditional rendering is the ternary:

{isOverBudget
  ? <span className="warning">Over budget!</span>
  : <span className="ok">On track</span>
}

The ternary works anywhere inside JSX because it is an expression. Use it when you need to choose between two pieces of UI.

The logical AND operator

When you only want to render something if a condition is true — and render nothing otherwise — use &&:

{incomeSources.length === 0 && (
  <p className="empty">No income sources yet.</p>
)}

If incomeSources.length === 0 is true, React renders the <p>. If it is false, React renders nothing. Avoid using && with numbers — {count && <Foo />} renders 0 to the page when count is zero. Use {count > 0 && <Foo />} or a ternary instead.

Early returns

For more complex conditions, return early from the component:

export default function LeftToAssign({ amount }) {
  if (amount === null) {
    return <div className="left-to-assign">Add income to start.</div>;
  }

  return (
    <div className={`left-to-assign ${amount < 0 ? 'over' : ''}`}>
      {amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
    </div>
  );
}

Early returns keep complex logic readable without deeply nested ternaries. Return the fallback first, then the main render at the bottom.

Conditional class names

You will often apply different CSS classes based on state. Use a template literal or a ternary in the className:

<div className={`progress-bar__fill ${pct >= 100 ? 'over' : pct >= 75 ? 'warning' : 'ok'}`}>

For many conditions, build the class string in a variable:

let statusClass = 'ok';
if (pct >= 100) statusClass = 'over';
else if (pct >= 75) statusClass = 'warning';

return <div className={`progress-bar__fill ${statusClass}`}>;

ZeroBudget examples

The LeftToAssign component uses all three patterns:

export default function LeftToAssign({ leftToAssign }) {
  const isNegative = leftToAssign < 0;
  const isZero = leftToAssign === 0;

  return (
    <div className={`left-to-assign ${isNegative ? 'over' : ''}`}>
      <span>{leftToAssign.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</span>
      {isNegative && <span className="warning">You have over-budgeted!</span>}
      {isZero && <span className="success">Every dollar is assigned.</span>}
    </div>
  );
}

Exercise

1. Update IncomeSection to show a <p>No income sources yet.</p> message when the incomeSources array is empty.
2. Update LeftToAssign to apply a different CSS class when the amount is negative vs zero vs positive.
3. Add a conditional <span> inside LeftToAssign that only renders when the amount is negative, showing a warning message.
4. Test all three states by passing different amount values from App.jsx.

Recap

• Use ternaries to choose between two pieces of UI.
• Use && to optionally render something — but avoid it with numbers that could be zero.
• Use early returns for complex conditions that would create deeply nested ternaries.
• Apply conditional CSS classes with template literals or pre-computed class variables.