Conditional Rendering

Conditional rendering in ReactJS refers to the ability to render different content or components based on certain conditions or criteria. It allows you to control what gets rendered in the user interface based on the state of your application or the values of certain variables.

Conditional rendering is a powerful technique that enables you to display different content, components, or UI elements based on various scenarios, such as user interactions, data availability, authentication status, or any other conditions you define in your application.

There are multiple ways to implement conditional rendering in ReactJS, depending on the complexity of your logic and the specific requirements of your application.

Let's explore some common approaches:

1. If statements or Ternary Operators

The simplest form of conditional rendering involves using if statements or ternary operators within the render method of your component. You can use JavaScript's conditional statements to conditionally render specific content or components based on the values of variables or state properties.

In the above code, the render method checks the value of isLoggedIn in the component's state. Depending on the value, it renders a different message.

2. Logical && Operator

Another approach to conditional rendering is using the logical && operator. This approach allows you to conditionally render content based on a single condition.

In this example, the <p> element will only be rendered if the isLoaded state property is true.

3. Using Switch Statements

For more complex conditional rendering scenarios, you can use switch statements to handle multiple conditions.

In the above code, based on the userRole value, different components are rendered.

4. Inline Functions

Sometimes, you may need to perform more complex operations or calculations to determine what to render. In such cases, you can use inline functions within the render method to conditionally render content.

In this example, the condition this.state.count > 0 is evaluated, and based on the result, different content is rendered.

These are just a few examples of how you can implement conditional rendering in ReactJS. The approach you choose will depend on your specific requirements and the complexity of your application logic.

Conditional rendering allows you to create dynamic and interactive user interfaces by selectively rendering content based on various conditions. It gives you the flexibility to control the UI based on changing states, user input, or data availability. That provides a more personalized and engaging user experience in your React applications.

In the next tutorial, we will discuss lists and keys in ReactJS.

import React from 'react';

function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome, user!</p> : <p>Please log in.</p>}
    </div>
  );
}

import React from 'react';

function MyComponent({ hasItems }) {
  return (
    <div>
      {hasItems && <ul>{/* Render list of items here */}</ul>}
      {!hasItems && <p>No items available.</p>}
    </div>
  );
}