Conditional Rendering

Using If/Else with JSX

React doesn't directly allow if/else statements in JSX. JSX is a syntax extension for JavaScript expressions. If/else is a statement, not an expression. But you can manage this by putting the if/else logic outside of JSX.

Consider the following example. We have a function called App.

function App() { 
  const isLoggedIn = true;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please log in.</h1>;
  }
}

    

Alternatively, one can use if/else logic before returning JSX.

Here is an alternate example. This is another version of function App.

function App() { 
  const isLoggedIn = true; 
  let message;

  if (isLoggedIn) {
    message = "Welcome back!";
  } else {
    message = "Please log in.";
  }

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

    

2. Ternary Operators

The ternary operator offers a shorter way to create if/else within JSX. Many people use it for simple conditions. Here's an example:

Does the condition 'isLoggedIn' evaluate to true? If it does "Welcome back!" appears. If it evaluates to false "Please log in." will be displayed. This code is found inside the JSX return statement. The simple condition is 'isLoggedIn'. The two elements are "Welcome back!" and "Please log in."

3. Short Circuiting

Short circuiting presents a more straightforward method to show something only when a condition is true. Logical AND (&&) operator is in use. The operator skips rendering when the condition is false.

Consider an example:

function App() {
  const isLoggedIn = true;
  return (
    <div>
      <h3>Welcome</h3>
      {isLoggedIn && <p>You are logged in.</p>}
    </div>
  );
}

    

In this example, the function 'App' is used. It returns a JSX element. The element is a third-level heading showcasing the word 'Welcome'. Also, it displays a second-level paragraph. When the user is logged in, the paragraph shows that they are indeed logged in.

However, if they are not logged in, the paragraph shows nothing. The key thing in this example is the use of the && operator. It controls the appearance of a status message. It only appears when a user is logged in.

Next, let's delve into an explanation.

isLoggedIn && <p>You are logged in.</p> means:

    

• When isLoggedIn is true render a paragraph showing that the user is logged in.
• When isLoggedIn is false render nothing.

One can also use the logical OR (||) operator for outputting a backup value. Only if the condition assesses to false, the faulty output renders.

const userName = "";

return <h1>{userName || "Guest"}</h1>;

    

In this, userName is an empty string (""). The non-optimal part "Guest" gets rendered. This only happens when userName has no values stored within it.

Comparison Table: When to Use Each

Method	When to Use
If/Else	When you need more complex logic outside JSX.
Ternary Operator	When you want to render one of two elements based on a condition.
Short Circuiting	When you only want to render something if a condition is true.

Real-world Example Combining All:

function App() {

  const isLoggedIn = true;
  const userName = "Alice";

  return (

    <div>

      {/* Ternary for simple condition */}
      <h1>{isLoggedIn ? `Hello, ${userName}` : "Please log in."}</h1>

      {/* Short circuiting for additional message */}
      {isLoggedIn && <p>Enjoy your time here!</p>}

      {/* Short circuit fallback */}
      <p>Your status: {userName || "Guest"}</p>

    </div>

  );
}