React Conditional Rendering

Conditional rendering is a fundamental concept in React that allows developers to render different components or elements based on certain conditions. It is similar to how conditions work in JavaScript, but React provides a more structured and efficient way to handle conditional logic in the UI.

What is Conditional Rendering in React?

​Conditional rendering in React refers to the process of dynamically deciding what to render based on a condition. Instead of rendering everything at once, React allows you to display specific components or elements depending on the state, props, or any other logic.

For example, you might want to:

• Show a login form if the user is not logged in.
• Display a welcome message if the user is logged in.
• Render a loading spinner while data is being fetched.

Methods of Conditional Rendering in React

React provides several ways to implement conditional rendering. Let’s explore each method with examples.

1. Using if-else Statements

​​import React from 'react';
function App() {
const isLoggedIn = true;
if (isLoggedIn) {
return<h1> Welcomeback, User! </h1>;
  } else {
return <h1> Pleaselogin. </h1>;
  }
}
export default App;

In this example:

• If isLoggedIn is true, the message "Welcome back, User!" is displayed.
• If isLoggedIn is false, the message "Please log in." is displayed.

2. Using Ternary Operators

Ternary operators are a concise way to handle conditional rendering in React. They are often used when there are only two possible outcomes.

​function App() {
const isLoggedIn = false;
return (
<div>
      {isLoggedIn ? <h1> Welcome back, User! </h1> : <h1> Please login.</h1>}
</div>
  );
}
export default App;

Here:

• The ternary operator (condition ? trueExpression : falseExpression) is used to decide which message to render.

3. Using Logical && Operator

​The logical && operator is useful when you want to render something only if a condition is true. If the condition is false, nothing is rendered.​

​​function App() {
  const isAdmin = true;
  return (
<div>
<h1>Welcome to the Dashboard</h1>
      {isAdmin && <p>You have admin privileges.</p>}
</div>
  );
}
export default App;

In this example:

• The message "You have admin privileges." is displayed only if isAdmin is true.

4. Using switch Statements

​For more complex conditions with multiple outcomes, a switch statement can be used.​

​​function App() {
  const userRole = 'admin';
  let content;
  switch (userRole) {
    case 'admin':
      content = <h1>Welcome, Admin!</h1>;
      break;
    case 'editor':
      content = <h1>Welcome, Editor!</h1>;
      break;
    case 'viewer':
      content = <h1>Welcome, Viewer!</h1>;
      break;
    default:
      content = <h1>Welcome, Guest!</h1>;
  }
  return <div>{content}</div>;
}
export default App;

Here:

• The switch statement determines what to render based on the value of userRole.

5. Using Inline Conditional Rendering

You can also use inline conditional rendering for simple conditions.

​​function App() {
  const isLoggedIn = true;
  return (
<div>
<h1>Welcome to the App</h1>
<p>{isLoggedIn ? 'You are logged in.' : 'You are not logged in.'}</p>
</div>
  );
}
export default App;

​This approach is useful for rendering small pieces of conditional content directly within JSX.

6. Using Conditional Rendering with Components

​You can create separate components for different conditions and render them based on the logic.

​​function LoggedIn() {
  return <h1>Welcome back, User!</h1>;
}
function LoggedOut() {
  return <h1>Please log in.</h1>;
}
function App() {
  const isLoggedIn = false;
  return (
<div>
      {isLoggedIn ? <LoggedIn /> : <LoggedOut />}
</div>
  );
}
export default App;

Here:

• The LoggedIn and LoggedOut components are rendered based on the value of isLoggedIn.

​