React ES6 Ternary Operator

The ternary operator is a concise alternative to traditional if/else statements. It allows you to write conditional expressions in a single line, making your code cleaner and more readable.

Syntax #

The syntax for the ternary operator is as follows:

condition ? expressionIfTrue : expressionIfFalse;

Ternary Operator vs. if/else #

Here’s a comparison to understand the differences:

Example: Using if/else

if (isAuthenticated) {
  displayDashboard();
} else {
  redirectToLogin();
}

Example: Using Ternary Operator

isAuthenticated ? displayDashboard() : redirectToLogin();

In the example above, the ternary operator simplifies the conditional logic into a single line.

Real-World Example: Conditional Rendering in React #

The ternary operator is especially useful in React for conditional rendering.

Example: Conditional Component Rendering

const isLoggedIn = true;

const displayMessage = isLoggedIn 
  ? <h1>Welcome back!</h1> 
  : <h1>Please log in.</h1>;

ReactDOM.render(displayMessage, document.getElementById("root"));

Advantages of the Ternary Operator #

1. Simplifies Code: Reduces the need for multiple lines of conditional logic.
2. Readability: Makes expressions concise and easy to understand.
3. Versatility: Works seamlessly in JSX for rendering components.

When to Use #

The ternary operator is ideal for simple conditions. However, avoid using it for complex logic, as it can reduce code readability.

Summary #

The React ES6 ternary operator is a powerful tool for writing cleaner and more efficient code. By mastering this operator, you can streamline your conditional logic and improve the maintainability of your React applications.

Want to learn React with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!