🔧 Conditional Rendering in React: Dynamically Rendering UI Elements

Conditional Rendering in React: Rendering UI Based on Conditions

Conditional rendering in React refers to the technique of rendering different UI elements based on certain conditions or states. React provides several ways to conditionally render components or elements depending on the application’s state or props.

1. What is Conditional Rendering?

Conditional rendering is the concept where different components or elements are rendered based on specific conditions. In React, this is typically achieved by using JavaScript operators like if, ternary, or && within JSX to decide what should be displayed.

Why Use Conditional Rendering?

• To display different UI elements based on user interaction or state changes.
• To handle edge cases like showing loading states, error messages, or empty states.
• To toggle between different layouts or components dynamically.

2. Basic Conditional Rendering Techniques

a. Using if/else Statement

The traditional approach of using if or else statements can be used before returning JSX. This is especially useful when multiple conditions need to be checked.

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <button onClick={() => setIsLoggedIn(true)}>Login</button>;
  }
};

b. Using Ternary Operator

The ternary operator is a shorthand way of performing conditional rendering. It’s useful when you want to display one element if a condition is true and another element if it's false.

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Login</button>
      )}
    </>
  );
};

c. Using Logical && Operator

The && operator is a short-circuit operator that renders an element if the condition is true. This approach is useful when you only need to render something conditionally without an else branch.

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn && <h1>Welcome back!</h1>}
      {!isLoggedIn && <button onClick={() => setIsLoggedIn(true)}>Login</button>}
    </>
  );
};

3. Conditional Rendering with Functions

You can also use functions to handle conditional rendering more clearly, especially when there are multiple conditions to check.

import React, { useState } from "react";

const MyComponent = () => {
  const [status, setStatus] = useState("loading");

  const renderContent = () => {
    if (status === "loading") {
      return <p>Loading...</p>;
    } else if (status === "error") {
      return <p>Error occurred!</p>;
    } else {
      return <p>Data loaded successfully!</p>;
    }
  };

  return (
    <div>
      {renderContent()}
      <button onClick={() => setStatus("error")}>Simulate Error</button>
      <button onClick={() => setStatus("success")}>Simulate Success</button>
    </div>
  );
};

4. Conditional Rendering with React Components

Sometimes, you might want to render entire components based on a certain condition.

import React, { useState } from "react";

const Welcome = () => <h1>Welcome back!</h1>;
const Login = () => <button>Login</button>;

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return isLoggedIn ? <Welcome /> : <Login />;
};

5. Conditional Rendering Based on Array Mapping

If you're rendering a list of items, conditional rendering can be used to selectively render certain elements in the list.

import React from "react";

const items = [
  { id: 1, name: "Item 1", available: true },
  { id: 2, name: "Item 2", available: false },
  { id: 3, name: "Item 3", available: true },
];

const ItemList = () => {
  return (
    <ul>
      {items.map((item) =>
        item.available ? (
          <li key={item.id}>{item.name}</li>
        ) : null
      )}
    </ul>
  );
};

6. Conditional Rendering with useEffect for API Calls

In many cases, you'll conditionally render elements based on the results of API calls or asynchronous data fetching. This can be done using state and side effects with useEffect.

import React, { useState, useEffect } from "react";

const DataFetchingComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((err) => {
        setError(err);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return <div>{JSON.stringify(data)}</div>;
};

7. Best Practices for Conditional Rendering

• Keep it Simple: Avoid deeply nested conditions that make the JSX difficult to read and maintain.
• Use Helper Functions: If you have multiple conditions, it’s often cleaner to use helper functions for rendering different parts of the UI.
• Consider State and Props: Conditional rendering often depends on the component’s state or props. Make sure to handle edge cases such as loading states, empty data, and errors.

8. Conclusion

Conditional rendering is a fundamental concept in React that enables you to display different UI elements based on the state or props. By using techniques such as if, ternary operators, && operators, or even functions, you can dynamically adjust what your components render. Proper conditional rendering helps improve user experience by displaying appropriate content based on the app’s state or user interaction.