Use of the Ternary Operator in Conditional Rendering.
Last Updated :
24 Jul, 2024
In React, conditional rendering helps show different things based on certain conditions. The ternary operator is a concise way to do this quickly and clearly. In this article, we will learn step by step process to use the ternary operator for conditional rendering in React.
Syntax: React developers have multiple approaches for implementing conditional rendering, but the ternary operator stands out for its concise syntax.
condition ? expression_if_true : expression_if_false;
Different approaches discussed below:
Basic Ternary Operator:
the basic form of the ternary operator is used to assign a value based on a condition. Here's a simple example:
const result = condition ? 'True Value' : 'False Value';
In this case, if the condition is true, the variable result will be assigned the value 'True Value'; otherwise, it will be assigned 'False Value'.
Ternary Operator in JSX:
This approach showcases the ternary operator within JSX, a common scenario in React components for conditional rendering.
Syntax:
return (
<div>
{
isLoggedIn ? <p>Welcome, User!</p> :
<button
onClick={() => setLoggedIn(true)}>
Log In
</button>
}
</div>
);
Here, if isLoggedIn is true, it renders a welcoming message; otherwise, it displays a login button. This concise syntax is a powerful way to handle dynamic content in React components.
Steps to Create the React App:
Step 1: Create a ReactJS project:
npx create-vite@latest conditional-rendering-app --template react
Step 2: Navigate to the project:
cd conditional-rendering
Step 3: Installing the modules:
npm install
Project Structure:
Project structure of the appThe updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
Example: Below is the code example of the ternary operator in conditional rendering:
CSS
/* Write CSS Here */
.conditional-container {
text-align: center;
margin-top: 50px;
}
.logged-in,
.logged-out {
font-size: 1.5em;
margin-bottom: 20px;
}
.welcome-message {
color: #27ae60;
font-size: 2em;
}
.status-message {
color: #3498db;
}
.greeting-message {
color: #e74c3c;
}
.instruction-message {
color: #f39c12;
}
.logout-button,
.login-button {
padding: 10px 20px;
font-size: 1.2em;
cursor: pointer;
}
.logout-button {
background-color: #e74c3c;
color: #fff;
border: none;
}
.login-button {
background-color: #27ae60;
color: #fff;
border: none;
}
JavaScript
//ConditionalRenderingExample.jsx
import React,
{
useState
} from 'react';
import './ConditionalRenderingExample.css';
const ConditionalRenderingExample = () => {
// State to track whether the user is logged in
const [isLoggedIn, setLoggedIn] = useState(false);
return (
<div className="conditional-container">
{/* Ternary operator used for conditional rendering */}
{isLoggedIn ? (
<div className="logged-in">
<p className="welcome-message">
Welcome, Geek!
</p>
<p className="status-message">
You are logged in!
</p>
<button className="logout-button"
onClick={() => setLoggedIn(false)}>
Log Out
</button>
</div>
) : (
<div className="logged-out">
<p className="greeting-message">
Hey, you are not logged in!
</p>
<p className="instruction-message">
Please log in to continue
</p>
<button className="login-button"
onClick={() => setLoggedIn(true)}>
Log In
</button>
</div>
)}
</div>
);
};
export default ConditionalRenderingExample;
JavaScript
//App.jsx
import './App.css'
import ConditionalRenderingExample
from './Components/ConditionalRenderingExample'
function App() {
return (
<>
<ConditionalRenderingExample />
</>
)
}
export default App
Steps to run the app:
npm run start
Output:
OutPut
Similar Reads
What is the purpose of the && operator in conditional rendering? The JavaScript conditional rendering concept allows you to display content in a dynamic way, based on predetermined conditions. The logic AND operator is often used to simplify code and improve readability for conditional rendering. This article will examine the purpose of && operator condit
3 min read
C++ Ternary or Conditional Operator In C++, the ternary or conditional operator ( ? : ) is the shortest form of writing conditional statements. It can be used as an inline conditional statement in place of if-else to execute some conditional code.Example:C++#include <iostream> using namespace std; int main() { int x = 10, y = 20
3 min read
Conditional Operator in Programming Conditional Operator, often referred to as the ternary operator, is a concise way to express a conditional (if-else) statement in many programming languages. It is represented by the "?" symbol and is sometimes called the ternary operator because it takes three operands. Table of Content Syntax of C
9 min read
How to use conditional operator in jQuery a template? In this article, we will learn to use ternary or conditional operator in jQuery. The Ternary or Conditional operator takes three operands, a condition followed by question mark followed by two expressions to execute with a semicolon (:) in between the two expressions. Syntax: condition ? expression1
1 min read
How to implement Conditional Rendering in React? This article explores JavaScript's conditional rendering in React JS, including various methods, syntax, and applications, leveraging React's virtual DOM, reusable components, props, and rapid rendering capabilities in single-page UI applications.We will use the following approaches to implement con
4 min read