React Conditionals

In React, conditionals are used to render content based on certain conditions—just like regular JavaScript. It allows you to decide what should be displayed on the screen and when.

Let’s say you want to show a message only when a user is logged in. React lets you use different types of conditional statements for this purpose.

Why Use Conditionals in React?

Conditionals make your app interactive and dynamic. They help you:

• Show or hide components.
• Display different content based on state or props.
• Improve user experience with personalized UI.

Different Ways to Use Conditionals in React

1. Using if Statements

You can use the basic if condition outside JSX to decide what to render.

function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please log in.</h1>;
}

Here, based on the isLoggedIn prop, we return different JSX.

2. Using the Ternary Operator

Inside JSX, the ternary (? :) operator is very useful.

function UserGreeting(props) {
  return (
    <div>
      {props.isLoggedIn ? <p>Hello, User!</p> : <p>You are not logged in.</p>}
    </div>
  );
}

This is clean and concise for simple conditions.

3. Using Logical AND (&&)

When you want to show something only when a condition is true, use &&.

function Notification(props) {
  return (
    <div>
      {props.hasNewMessages && <p>You have new messages!</p>}
    </div>
  );
}

If hasNewMessages is true, the paragraph is rendered. If not, nothing is shown.

4. Using if-else with Variables

You can also store JSX in a variable before returning it.

function Dashboard(props) {
  let content;
  if (props.isAdmin) {
    content = <h2>Admin Panel</h2>;
  } else {
    content = <h2>User Dashboard</h2>;
  }
  return <div>{content}</div>;
}

This approach is great for longer or more complex JSX blocks.

5. Switch Statement for Multiple Conditions

When you have more than two cases, switch can be cleaner.

function StatusMessage({ status }) {
switch (status) {
case 'loading':
return <p>Loading...</p>;
case 'success':
return <p>Data loaded successfully!</p>;
case 'error':
return <p>Something went wrong.</p>;
default:
return <p>Unknown status.</p>;
}
}


Real-World Example: Conditional Button

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      {props.isLoggedIn ? 'Logout' : 'Login'}
    </button>
  );
}

Here, one button switches its label based on the login status.

Best Practices

• Keep conditions simple inside JSX.
• Use functions or variables for complex logic.
• Avoid nested ternaries—they make code hard to read.
• Reuse components when possible for better code structure.

Conclusion

React conditionals are a core concept that help you control what gets shown in your UI. Whether it’s showing a message, hiding a button, or displaying different components based on user actions, conditional rendering makes your app smart and responsive.