Conditional Rendering

If-Else Statements

The if-else statement is a fundamental way to implement conditional rendering in React. You can use it to render different components or elements based on a condition.

Here's an example:

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

In the example above, the Greeting component uses an if-else statement to conditionally render different messages based on the user's login status.

You can use the if-else statement inside the component's render method or as part of a function that returns JSX.

Multiple Conditions

For multiple conditions, you can use if-else if statements to handle different cases:

function UserRole(props) {
  const role = props.role;
  if (role === 'admin') {
    return <h2>Welcome, Admin!</h2>
  } else if (role === 'editor') {
    return <h2>Welcome, Editor!</h2>
  } else {
    return <h2>Welcome, Guest!</h2>
  }
}

In this example, the UserRole component checks the user's role and renders a different message for admins, editors, and guests.

Using Ternary Operators in React

Ternary operators provide a concise way to perform conditional rendering in React. They are often used for simple conditions where you want to render one of two elements based on a condition.

Here's an example:

function UserStatus(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      { <h2>{isLoggedIn ? "Welcome back!" : "Please log in"}</h2> }
    </div>
  );
}

Switch Statement in React

The switch statement is useful for handling multiple conditions in React. It allows you to render different components or elements based on the value of a variable.

Here's an example:

function DayMessage(props) {
  const day = props.day;
  let message;
  switch (day) {
    case 'Monday':
      message = 'Start of the work week!';
      break;
    case 'Friday':
      message = 'Almost the weekend!';
      break;
    case 'Saturday':
    case 'Sunday':
      message = 'It\'s the weekend!';
      break;
    default:
      message = 'Have a great day!';
  }
  return <h2>{message}</h2>
}

In this example, the DayMessage component uses a switch statement to render different messages based on the value of the day prop.

Using the && Operator for Conditional Rendering

The && operator can be used for conditional rendering when you want to render an element only if a certain condition is true. If the condition is false, React will ignore the element.

Here's an example:

function Notification(props) {
  const hasNotifications = props.hasNotifications;
     return (
     <div>
       <h2>Notifications</h2>
       { hasNotifications && <p>You have new notifications!</p> }
     </div>
   );
}

In this example, the Notification component uses the && operator to conditionally render a message if the hasNotifications prop is true. If it's false, nothing is rendered in that place.

Summary

In this tutorial, we covered various techniques for conditional rendering in React, including:

• Using if-else statements for straightforward conditions.
• Employing ternary operators for concise conditional rendering.
• Utilizing switch statements for handling multiple conditions.

Choose the method that best fits your use case and coding style. Conditional rendering is a powerful feature in React that helps create dynamic and interactive user interfaces.