Using Conditional Rendering

One of the most basic requirements when creating React user interfaces is the ability to display or conceal components according to specific criteria. You can choose what to display depending on the user's input or the current state of your application by using conditional rendering. We'll look at three common approaches to conditional rendering in React in this blog: if statements, ternary operators, and logical && operators.

Using if Statements

An if statement is the traditional method of handling conditions in JavaScript, and React also supports this technique. You can express your logic outside of the return statement in React, however you cannot use an if statement inside of JSX.

function WelcomeMessage({ isLoggedIn }) {
  let message;

  if (isLoggedIn) {
    message = <h1>Welcome back!</h1>;
  } else {
    message = <h1>Please sign in.</h1>;
  }

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

In this example, the if statement checks whether the user is logged in or not. Based on this condition, it assigns a message to the message variable, which is then rendered inside the div.

This method is easy to understand and works well for more complex logic. However, it requires you to create extra variables or separate components when working within JSX.

Using Ternary Operators

The ternary operator is a more efficient substitute for if statements in conditional rendering, especially in basic cases. It enables you to create conditions right inside of JSX.

function WelcomeMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
    </div>
  );
}

The ternary operator functions as a conditional expression in one line. It verifies whether the condition isLoggedIn; if it is, it displays "Welcome back!"; if not, it displays "Please sign in." Is the syntax conditional? statementIfFalse : expressionIfTrue.

This method works great for producing two distinct results in one line of code depending on a condition. On the other hand, complicated conditions could make reading more difficult.

Using Logical && Operator

The logical && operator is useful when you want to render something only if a certain condition is true. Unlike the ternary operator, it doesn't require an "else" case.

function Notifications({ hasNotifications }) {
  return (
    <div>
      <h1>Dashboard</h1>
      {hasNotifications && <p>You have new notifications!</p>}
    </div>
  );
}

Here, the condition hasNotifications is evaluated. If it's true, the notification message will be displayed. If it's false, nothing will be rendered. The && operator works by evaluating the left side (the condition) first, and if it's true, it renders the right side.

This approach is great for cases where you only need to render something conditionally without needing an alternative display (i.e., no need for an "else" clause). It's simple and clean for cases where you don't need fallback content.

Which One Should You Use?

1. If statements work well when handling several circumstances or more complicated reasoning. They make it easier to distinguish between JSX and logic, particularly when more than two options are being rendered.
2. Ternary operators can make your code less readable, so avoid using them if your conditions become too complicated. They are great for simple, short conditional rendering.
   
3. When you only want to render something when a condition is true and don't need to have a backup rendering for when the condition is false, logical && operators are ideal.
   

Conclusion

Conditional rendering is a powerful tool in React that allows you to control what appears in your UI based on dynamic conditions. Using if statements, ternary operators, and logical && operators, you can easily manage these conditions in different ways based on your needs. Whether you're showing or hiding elements, these methods offer flexibility in React applications.