11. Conditional Rendering

Conditional rendering in React is a powerful concept that allows developers to render different UI elements or components based on certain conditions. This approach is similar to conditional statements in JavaScript, such as if, else, and switch, but in the context of React, it determines what gets displayed in the component's render method.

At its core, conditional rendering in React is about deciding which elements should be displayed based on the current state or props of a component. This is crucial for creating dynamic and interactive user interfaces. Let's dive deeper into the various techniques and patterns for implementing conditional rendering in React applications.

Using JavaScript Conditional Operators

One of the simplest ways to implement conditional rendering is by using JavaScript conditional operators directly within the JSX. The most common operators used are the if statement, the ternary operator (? :), and the logical AND operator (&&).

If Statement

The if statement is straightforward and can be used to conditionally render elements. However, since JSX is an expression, you cannot directly use an if statement inside it. Instead, you can use an if statement to determine what should be rendered before returning the JSX:

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

In this example, the Greeting component checks the isLoggedIn prop and returns different elements based on its value.

Ternary Operator

The ternary operator is a more concise way to implement conditional rendering directly within JSX. It's often used when you need to render one of two elements based on a condition:

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

Here, the ternary operator checks the isLoggedIn prop and renders the appropriate message.

Logical AND Operator

The logical AND operator (&&) is useful when you want to render an element only if a condition is true. If the condition is false, React will ignore the expression:

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

In this example, the Mailbox component only displays the message if there are unread messages.

Using Functions for Conditional Rendering

Another approach to handle complex conditional rendering is to encapsulate the logic within functions. This can make your components cleaner and more readable, especially when dealing with multiple conditions or more complex logic.

function UserGreeting() {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting() {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <UserGreeting /> : <GuestGreeting />;
}

By separating the rendering logic into distinct functions or components, you can achieve better separation of concerns and improve the maintainability of your code.

Conditional Rendering with Inline Styles

Sometimes, you might want to conditionally apply styles to elements. This can be done using inline style objects in JSX, where you can dynamically set styles based on component state or props:

function StyledButton(props) {
  const buttonStyle = {
    backgroundColor: props.isPrimary ? 'blue' : 'gray',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
  };

  return <button style={buttonStyle}>Click me</button>;
}

In this example, the StyledButton component applies different background colors based on the isPrimary prop.

Conditional Rendering with CSS Classes

Another common pattern is to conditionally apply CSS classes to elements. This can be achieved by dynamically setting the className attribute in JSX:

function AlertMessage(props) {
  const className = props.isError ? 'alert-error' : 'alert-info';

  return <div className={className}>{props.message}</div>;
}

Here, the AlertMessage component applies different CSS classes based on the isError prop. This allows you to leverage CSS for styling while keeping the logic in JavaScript.

Rendering Multiple Components

When you need to render multiple components conditionally, you can use arrays to hold the components and render them based on conditions:

function Dashboard(props) {
  const items = [];

  if (props.showNotifications) {
    items.push(<Notifications />);
  }

  if (props.showMessages) {
    items.push(<Messages />);
  }

  return <div>{items}</div>;
}

In this example, the Dashboard component conditionally adds Notifications and Messages components to the items array based on the respective props.

Handling Conditional Rendering in Lists

When working with lists, you might want to conditionally render list items based on certain conditions. This can be done using the techniques discussed above within the map function:

function TodoList(props) {
  return (
    <ul>
      {props.todos.map((todo) => (
        todo.isCompleted ? null : <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

In this TodoList component, only incomplete tasks are rendered. The completed tasks are filtered out using a conditional check within the map function.

Best Practices for Conditional Rendering

• Keep it Simple: Strive to keep your conditional rendering logic as simple as possible. If it becomes too complex, consider refactoring the logic into separate functions or components.
• Use Descriptive Names: When using functions or variables for conditional rendering, choose descriptive names that clearly convey the purpose of the condition.
• Leverage CSS: Whenever possible, use CSS classes for styling instead of inline styles, as this keeps your JSX cleaner and separates concerns.
• Optimize Performance: Be mindful of performance implications when rendering large lists conditionally. Use techniques like memoization or virtualization to optimize rendering.

Conditional rendering is a fundamental concept in React that allows you to create dynamic and responsive user interfaces. By using JavaScript's conditional operators and patterns, you can control what gets rendered based on the current state or props of your components. Whether you're rendering single elements, applying styles, or managing complex UI states, mastering conditional rendering will enable you to build more robust and flexible React applications.

Next page of the Free Ebook:

42Lists and Keys

8 minutes