How to Use If Else in React: Simple Conditional Rendering

In React, you use if else statements inside your component functions to decide what to show. You can write if else directly or use conditional (ternary) operators inside JSX to render different content based on conditions.

Syntax

In React functional components, you use if else statements in JavaScript before returning JSX. Alternatively, you can use the ternary operator inside JSX for inline conditions.

• If else outside JSX: Write normal if else logic before the return statement.
• Ternary operator inside JSX: Use condition ? trueContent : falseContent inside JSX to choose what to render.

jsx

function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}

// Or using ternary inside JSX
function GreetingTernary(props) {
  return (
    <div>
      {props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
}

Output

<h1>Welcome back!</h1> or <h1>Please sign up.</h1> depending on isLoggedIn

Example

This example shows a React component that uses if else to display a greeting based on whether the user is logged in or not.

jsx

import React, { useState } from 'react';

function UserGreeting() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  function toggleLogin() {
    setIsLoggedIn(!isLoggedIn);
  }

  if (isLoggedIn) {
    return (
      <div>
        <h1>Welcome back!</h1>
        <button onClick={toggleLogin}>Log out</button>
      </div>
    );
  } else {
    return (
      <div>
        <h1>Please sign up.</h1>
        <button onClick={toggleLogin}>Log in</button>
      </div>
    );
  }
}

export default UserGreeting;

Output

Shows "Please sign up." with a Log in button initially; clicking Log in changes to "Welcome back!" with a Log out button.

Common Pitfalls

• Trying to use if else directly inside JSX without wrapping in curly braces causes errors.
• Returning multiple JSX elements without a single parent element or fragment causes syntax errors.
• Using assignment = instead of comparison === in conditions leads to bugs.

jsx

function WrongUsage(props) {
  // This will cause error because if else is not inside JS block
  return (
    <div>
      {/* if else cannot be used directly inside JSX */}
      {props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
}

// Correct way using ternary
function CorrectUsage(props) {
  return (
    <div>
      {props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
}

Quick Reference

Use these tips for if else in React:

• Write if else before return in functional components.
• Use ternary operator condition ? true : false inside JSX for inline conditions.
• Use logical AND condition && element to render only if true.
• Wrap multiple JSX elements in a fragment <></> or a parent element.

Key Takeaways

Use if else statements outside JSX to decide what to render in React components.

Inside JSX, prefer the ternary operator for conditional rendering.

Never put if else statements directly inside JSX without curly braces.

Wrap multiple JSX elements in a single parent or fragment to avoid errors.

Use logical AND for simple conditional rendering when no else is needed.