How to Update Conditional Rendering in React

Conditional rendering is a core concept in React that allows you to display different UI elements based on specific conditions. This article explains how to update and manage conditional rendering dynamically using React state and props, covering essential techniques like ternary operators, logical operators, and state-driven updates to ensure your user interface reacts instantly to user interactions.

Understanding State-Driven Updates

To update what is rendered on the screen, React relies on changes in state or props. When a component’s state updates, React automatically triggers a re-render, re-evaluating the conditional logic and displaying the correct UI.

Here is a look at the most common and effective ways to implement and update conditional rendering in React.

1. Using the Ternary Operator for Dynamic Toggles

The ternary operator (condition ? true : false) is the most common way to switch between two different elements inline. It is ideal for toggling views, such as switching between a “Log In” and “Log Out” button.

import { useState } from 'react';

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

  return (
    <div>
      {isLoggedIn ? (
        <button onClick={() => setIsLoggedIn(false)}>Log Out</button>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Log In</button>
      )}
    </div>
  );
}

In this example, calling setIsLoggedIn updates the state, which forces React to re-render the component and update the rendered button.

2. Using the Logical AND (&&) Operator for Single Conditions

When you want to render an element only if a condition is true (and render nothing if it is false), use the logical && operator.

function Notification({ messages }) {
  return (
    <div>
      <h1>Dashboard</h1>
      {messages.length > 0 && (
        <p>You have {messages.length} unread messages.</p>
      )}
    </div>
  );
}

If messages.length is updated to a value greater than zero, React automatically updates the DOM to display the paragraph.

3. Handling Complex Logic with If/Else Statements

For complex rendering logic that involves multiple conditions, standard JavaScript if/else blocks are best. Since these cannot be written inside the JSX return statement directly, you must handle them before the return statement.

function UserStatus({ role }) {
  let content;

  if (role === 'admin') {
    content = <AdminPanel />;
  } else if (role === 'editor') {
    content = <EditorPanel />;
  } else {
    content = <ViewerPanel />;
  }

  return <div className="container">{content}</div>;
}

To update this view, you simply update the role prop passed to the component. React detects the prop change and updates the rendering accordingly.

Summary of Best Practices