Useful Cheatsheetsusefulcheatsheets.com
React Conditional Rendering
Chapter 01 · Page 7
Beginner

React Conditional Rendering

Show or hide elements in React using if statements, ternaries, logical operators, and switch patterns.

TL;DR

  1. 01Use if statements to return different JSX based on conditions.
  2. 02Use ternary expressions inside JSX for inline conditionals.
  3. 03Use logical AND for simple show-or-hide patterns.

Tips

  1. 01Prefer if statements and switch for clarity, since they separate logic from JSX and are easier to test and refactor.

Warnings

  1. 01Avoid using <code>&&</code> with falsy values like <code>0</code> or empty strings, since they will render nothing instead of the string itself.
Notes
Useful Cheatsheetsusefulcheatsheets.com
React Conditional Rendering
Chapter 01 · Page 8
Beginner

React Conditional Rendering

(continued)

If Statements

  • Return different JSX based on a condition before the return statement.
    function UserInfo({ user }) {
  if (!user) return <p>Loading...</p>;
  return <div>{user.name}</div>;
}
  • This is the clearest pattern when conditions are complex.
  • Use early returns to handle edge cases at the top of the component.
  • Combine multiple if statements for sequential checks.
  • Avoid nesting too many ifs — extract sub-components instead.
Notes
Useful Cheatsheetsusefulcheatsheets.com
React Conditional Rendering
Chapter 01 · Page 9
Beginner

React Conditional Rendering

(continued)

Ternary Operator

  • Use the ternary operator inside JSX for inline conditionals.
    <div>{user ? user.name : "Guest"}</div>
  • Read as "if user is truthy, show user.name, else show Guest".
  • Keep ternaries simple and readable — use if statements for complex logic.
  • Nest ternaries only for quick reads, not for multiple conditions.
    <div>{user ? (user.isAdmin ? "Admin" : "User") : "Guest"}</div>
  • Extract nested ternaries into separate components for clarity.
Notes
Useful Cheatsheetsusefulcheatsheets.com
React Conditional Rendering
Chapter 01 · Page 10
Beginner

React Conditional Rendering

(continued)

Logical AND Operator

  • Use && to render JSX only when a condition is true.
    <div>{user && <p>Hello, {user.name}!</p>}</div>
  • This hides the element when the condition is false without rendering anything.
  • Only use when there is no "else" case needed — otherwise use ternary.
  • Beware of falsy values — avoid using && with 0 or empty strings.
    {count > 0 && <p>{count} items</p>}
  • Use ternary instead if you need to show something when the condition is false.
Notes
Useful Cheatsheetsusefulcheatsheets.com
React Conditional Rendering
Chapter 01 · Page 11
Beginner

React Conditional Rendering

(continued)

Switch Patterns

  • Use a switch statement before the return for multiple conditions.
    function Status({ status }) {
  switch (status) {
    case "loading":
      return <p>Loading...</p>;
    case "success":
      return <p>Done!</p>;
    case "error":
      return <p>Error occurred</p>;
    default:
      return null;
  }
}
  • Switch works well when you have many distinct states to handle.
  • Always include a default case for unexpected values.
  • Extract each case into a separate component for reusability.
Notes
Useful Cheatsheetsusefulcheatsheets.com
React Conditional Rendering
Chapter 01 · Page 12
Beginner

React Conditional Rendering

(continued)

Conditional Components

  • Create helper components to encapsulate conditional rendering logic.
    function IfAdmin({ children, user }) {
  return user?.isAdmin ? children : null;
}
<IfAdmin user={user}>
  <AdminPanel />
</IfAdmin>
  • Use render props or children to control what is displayed.
  • Name components clearly to show their conditional purpose.
  • This pattern keeps components focused and testable.
  • Combine with custom hooks for more complex conditional logic.
Notes
Useful Cheatsheetsusefulcheatsheets.com
React Conditional Rendering
Chapter 01 · Page 13
Beginner

React Conditional Rendering

(FAQ)

FAQ

Use a ternary inside JSX when you need to choose between two inline values or elements. Reach for an if statement when the logic is complex or you're returning entirely different component trees, since it keeps your JSX cleaner and the logic easier to test.

The && operator short-circuits to the left operand when it's falsy, and React renders the number 0. Convert the left side to a boolean first: use !!count && or count > 0 && to avoid this.

Use a switch statement or extract the logic into a helper function that returns JSX. This keeps your render method readable and makes each branch independently testable, especially when you have more than two possible states.

No, if statements are not expressions and can't appear inside JSX curly braces. Move the conditional logic above the return statement or wrap it in an immediately invoked function expression, though the former is almost always cleaner.

Use a ternary expression in the className prop: className={isActive ? 'active' : 'inactive'}. For multiple conditional classes, the classnames or clsx library keeps the logic readable without manual string concatenation.