React Conditional Rendering: Show Content Based on Logic

Conditional rendering in React is a fundamental technique that allows you to display different content based on certain conditions. Think of it as your website’s “if/else” statement. It’s essential for creating dynamic and interactive user interfaces. This article will guide you through various methods of conditional rendering, equipping you with the knowledge to build more responsive and user-friendly React applications. We'll look at `if` statements, ternary operators, short-circuit evaluation, and component-based approaches. Let's dive into the world of React conditional rendering!

🎯 Summary:

✅ Understand the core concept of conditional rendering in React.
💡 Learn how to use `if` statements for simple conditions.
🤔 Master the ternary operator for concise conditional logic.
📈 Explore short-circuit evaluation for rendering based on truthiness.
🌍 Discover how to create component-based conditional rendering for complex scenarios.
🔧 See practical code examples and use cases.

Using If/Else Statements in React Components

The simplest way to implement conditional rendering is by using traditional JavaScript `if/else` statements within your React components. This approach is straightforward and easy to understand, especially for developers new to React.

Basic If/Else Example

Here's a basic example demonstrating how to render different messages based on whether a user is logged in:


import React from 'react';

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

function App() {
  return (
    <div>
      <Greeting isLoggedIn={true} />
      <Greeting isLoggedIn={false} />
    </div>
  );
}

export default App;

In this example, the Greeting component checks the isLoggedIn prop and renders a different heading based on its value.

Rendering Null with If Statements

Sometimes, you might want to render nothing at all based on a condition. In such cases, you can return null:


function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

function App() {
  return (
    <div>
      <WarningBanner warn={false} /> {/* Doesn't render anything */}
      <WarningBanner warn={true} />  {/* Renders the warning message */}
    </div>
  );
}

Here, the WarningBanner component only renders if the warn prop is true.

Ternary Operator for Concise Conditional Rendering

The ternary operator (condition ? expr1 : expr2) provides a more concise way to write conditional rendering logic. It's perfect for simple conditions where you want to choose between two different elements or values.

Basic Ternary Operator Example

Let's rewrite the Greeting component using the ternary operator:


function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <h1>{
      isLoggedIn ? 'Welcome back!' : 'Please sign up.'
    }</h1>
  );
}

This code achieves the same result as the `if/else` example but in a more compact form.

Nesting Ternary Operators

While you can nest ternary operators for more complex conditions, it can quickly become difficult to read. Use with caution!


function Display(props) {
  const value = props.value;
  return (
    <div>{
      value > 10 ? 'Greater than 10' : 
      value > 5 ? 'Greater than 5' : 
      'Less than or equal to 5'
    }</div>
  );
}

Short-Circuit Evaluation with && Operator

React also allows you to use short-circuit evaluation with the && operator for conditional rendering. This is useful when you want to render something only if a condition is true, and render nothing otherwise.

Basic Short-Circuit Example

Here's how you can use the && operator to conditionally render a message:


function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>{
      unreadMessages.length > 0 &&
      <h2>
        You have {unreadMessages.length} unread messages.
      </h2>
    }</div>
  );
}

function App() {
  const messages = ['React', 'Re: React', 'Re:Re: React'];
  return <Mailbox unreadMessages={messages} />;
}

In this example, the <h2> element is only rendered if unreadMessages.length > 0 is true.

Component-Based Conditional Rendering

For more complex conditional rendering scenarios, consider creating separate components that handle different states. This approach promotes code reusability and maintainability.

Creating Separate Components

Let's create a LoginButton and LogoutButton component and conditionally render them based on the user's login status:


function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

This example demonstrates how to manage the login state and conditionally render different buttons based on that state.

Practical Use Cases for Conditional Rendering

Conditional rendering is a versatile tool that can be applied in various scenarios to enhance user experience and application functionality.

Displaying Loading Indicators

Show a loading spinner while fetching data from an API:


function DataDisplay(props) {
  const { data, isLoading } = props;

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!data) {
    return <div>No data available.</div>;
  }

  return (
    <div>
      {/* Display data here */}
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Handling Empty States

Render a message when a list is empty:


function ItemList(props) {
  const { items } = props;

  if (items.length === 0) {
    return <div>No items found.</div>;
  }

  return (
    <ul>
      {items.map(item => (<li key={item.id}>{item.name}</li>))}
    </ul>
  );
}

Conditional Rendering with TypeScript

TypeScript adds type safety to your conditional rendering logic, helping you catch potential errors during development.

Basic TypeScript Example


interface GreetingProps {
  isLoggedIn: boolean;
  userName?: string; // Optional property
}

function Greeting(props: GreetingProps) {
  const { isLoggedIn, userName } = props;

  return (
    <h1>{
      isLoggedIn ? `Welcome back, ${userName || 'user'}!` : 'Please sign up.'
    }</h1>
  );
}

function App() {
  return (
    <div>
      <Greeting isLoggedIn={true} userName="Alice" />
      <Greeting isLoggedIn={false} />
    </div>
  );
}

Common Mistakes to Avoid

While conditional rendering is powerful, it's easy to make mistakes that can lead to unexpected behavior.

Forgetting to Return Null

Always ensure that your conditional logic covers all possible scenarios, including returning null when nothing should be rendered.

Overusing Ternary Operators

Avoid nesting too many ternary operators, as it can make your code difficult to read and maintain.

Interactive Code Sandbox

Let's explore React conditional rendering in an interactive CodeSandbox. This example showcases different conditional rendering techniques in a single, editable environment.

Use the following steps to create a conditional rendering example:

Create a new React project in CodeSandbox.
Implement conditional logic using `if` statements, ternary operators, and short-circuit evaluation.
Add multiple components and conditionally render them based on different states.
Experiment with rendering different elements based on user input.

Here's a sample of the code for this interactive example:


// App.js
import React, { useState } from 'react';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [unreadMessages, setUnreadMessages] = useState(['Message 1', 'Message 2']);
  const [isLoading, setIsLoading] = useState(true);

  const handleLoginClick = () => setIsLoggedIn(true);
  const handleLogoutClick = () => setIsLoggedIn(false);

  setTimeout(() => setIsLoading(false), 2000);

  return (
    <div>
      <h1>Conditional Rendering Example</h1>

      {isLoading ? (
        <div>Loading...</div>
      ) : (
        <div>
          {isLoggedIn ? (
            <div>
              <p>Welcome back!</p>
              <button onClick={handleLogoutClick}>Logout</button>
            </div>
          ) : (
            <div>
              <p>Please login.</p>
              <button onClick={handleLoginClick}>Login</button>
            </div>
          )}

          {unreadMessages.length > 0 && (
            <div>
              You have {unreadMessages.length} unread messages.
            </div>
          )}
        </div>
      )}
    </div>
  );
}

export default App;

Keywords

React conditional rendering
Conditional rendering in React
React if statement
React ternary operator
React short-circuit evaluation
React component rendering
Conditional rendering examples
React UI rendering
Dynamic content in React
React rendering logic
JavaScript rendering
React rendering techniques
React element rendering
React JSX
React components
React props
React state
React TypeScript
React loading indicators
React empty states

Frequently Asked Questions

What is conditional rendering in React?: Conditional rendering is a technique to display different content based on certain conditions. It allows you to create dynamic and interactive user interfaces.
When should I use if/else statements for conditional rendering?: Use if/else statements for simple conditions that are easy to understand. It's a good choice when you need to handle multiple branches of logic.
What is the ternary operator, and how does it work?: The ternary operator (condition ? expr1 : expr2) provides a concise way to write conditional rendering logic. It's suitable for simple conditions with two possible outcomes.
How does short-circuit evaluation work in React?: Short-circuit evaluation with the && operator allows you to conditionally render elements. It's useful when you want to render something only if a condition is true.
Can I use component-based conditional rendering?: Yes, component-based conditional rendering is a good approach for complex scenarios. It promotes code reusability and maintainability by creating separate components for different states.
What are some common mistakes to avoid with conditional rendering?: Common mistakes include forgetting to return null in some cases and overusing ternary operators, which can make the code difficult to read.

The Takeaway

Conditional rendering is a cornerstone of building dynamic React applications. By mastering `if/else` statements, ternary operators, short-circuit evaluation, and component-based approaches, you can create UIs that respond intelligently to user interactions and data changes. This knowledge will empower you to build more engaging and user-friendly web applications. Be sure to check out our other articles, such as React Component Composition Building Complex UIs and React Custom Hooks Simplify Your Code for more ways to improve your React applications!