React Conditional Rendering

React Conditional rendering is the process of selectively rendering components or elements based on certain conditions.

It allows you to control what gets displayed in your application’s user interface depending on the state, props, or other variables.

Conditional rendering is a fundamental concept in React because it enables dynamic and responsive user interfaces.

Conditional Rendering in React Js

There are several ways to implement conditional rendering in React. But here we will learn important ways.

• if Statements
• if-else Statements
• Ternary Operator
• Logical && Operator
• Switch Statement

if Statements

The if statement is a fundamental conditional statement in JavaScript and React. It allows you to execute a block of code if a specified condition evaluates to true.

if (condition) {
  // Code to be executed if the condition is true
}

Example –

File Name – Dashboard.js

function Dashboard({ isLoggedIn }) {
  if (isLoggedIn) {
    return <p>Welcome, User!</p>;
  }
}

File Name – Login.js

import Dashboard from "./Dashboard"
export default function Login() {
  return <Dashboard isLoggedIn="true" />
}

if-else Statements

An if-else statement extends the if statement by allowing you to specify code blocks for both the true and false outcomes of a condition.

if (condition) {
  // Code to be executed if the condition is true
} else {
  // Code to be executed if the condition is false
}

File Name – Dashboard.js

function Dashboard({ isLoggedIn }) {
  if (isLoggedIn) {
    return <p>Welcome, User!</p>;
  } else {
    return <p>Please log in.</p>;
  }
}

Ternary Operator

The ternary operator (condition ? valueIfTrue : valueIfFalse) is a concise way to conditionally render content in React. It’s often used when you want to choose between two values based on a condition.

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

Logical && Operator

You can use the logical && operator to conditionally render content in React. When the left side of && is true, it returns the right-side value, and when the left side is false, it returns false.

function Dashboard({ isLoggedIn }) {
  return isLoggedIn && <p>Welcome, User!</p>;
}

Switch Statement

The switch statement is used for selecting one of many code blocks to be executed. It’s often used when you have a single value that may match different cases.

switch (expression) {
  case value1:
    // Code to be executed if expression matches value1
    break;
  case value2:
    // Code to be executed if expression matches value2
    break;
  // ... other cases ...
  default:
    // Code to be executed if none of the cases match
}

function DayGreeting({ dayOfWeek }) {
  switch (dayOfWeek) {
    case 'Monday':
    case 'Tuesday':
    case 'Wednesday':
    case 'Thursday':
    case 'Friday':
      return <p>It's a weekday!</p>;
    case 'Saturday':
    case 'Sunday':
      return <p>It's the weekend!</p>;
    default:
      return <p>Invalid day</p>;
  }
}