Updated April 15, 2023
Introduction to React Ternary Operator
The ternary operator in the react js works in the same way how it works in the Javascript. With the help of the ternary operator, we can display the contents on the basis of one condition where everything depends on the condition true and false we can put the contents on the conditional basis. We can take an example of a ternary operator like we fetch data from server and data is empty then we can use a data check ternary operator where if data is empty or server is returning empty date then display some static data so that it will look good instead of displaying an empty to end-users.
Syntax:
Below is a simple syntax for the ternary operator in the react js. In the below syntax the first, we have written the conditional expression. This expression returns any boolean value and execution of the html code are depends on the success of it, it fails or simply the condition is false then the html code will not be displayed.
Please see the below syntax for the ternary operator for better understanding.
{Conditional expression > 0 &&
<ANY HTML TAG TO DISPLAY CONTENTS>
//Display any message on successful condition
</ANY HTML TAG TO DISPLAY CONTENTS>How Ternary Operator Works in React?
Before understanding the working of the ternary operator we need to understand why we need the ternary operators. You have seen conditional statements in the JavaScript where we execute either of the statement on the basis of the success or failure of the conditions, in the same we may face a situation where we wanted to display one html or any component on the conditional basis. To explain the working of it we can take some points.
- We can put a conditional expression inside the curly braces.
- The expression written inside the curly braces can be a combination of multiple expressions but they will always return a single boolean value.
- If the expression of the condition written inside curly braces is true then we will display the output written in the first.
Examples of React Ternary Operator
In the below, we are displaying two examples where we are trying to explain the react ternary operator. In case if we want to run the examples then we can create an html file and we can place the react code in javascript and html code in html and css code and we can get the output the same as the screens.
Example #1
This is a simple example here we are displaying the message on the basis of the true or false of anflag. Here we have used the simple ternary operator where we are checking the length of the array, if the length is greater than 0 which means there is some message, or if the length is not greater than the 0 which means we will display nothing.
Javascript parts,
//Main components which will display the message
function MsgBox(props) {
constunseenmsg = props.unseenmsg;
return (
<div>
<h1>How are you friends!</h1>
//Checking the message length if length is greater than zero or not
{unseenmsg.length> 0 &&
<h2>
Check Inbox you got some {unseenmsg.length} unseen messages.
</h2>
}
</div>
);
}
//Message contents of array
constmsg = ['GO', 'Ruby On Rail', 'Javascript', 'React JS'];
ReactDOM.render(
<MsgBoxunseenmsg={msg} />,
document.getElementById('main')
);HTML Parts,
This is the HTML for displaying the react contents.
<div id="main"></div>CSS Parts,
CSS to do little design for the body
* {
margin: 1;
background-color:yellow;
}Output:
In this screen, we can see the message as the array length was greater than 0 to show the message is also visible .
Example #2
React an example for displaying a different message on clicking on the button in different situations. In the below example on clicking on the button, we are displaying the message change.
Please find the below example along with the screen of the output.
Javascriptparts,
//Component to display the main contents with button
class AccessComponent extends React.Component {
constructor(props) {
super(props);
//Binding the function so that it will be available for this call
this.manageAccessClick = this.manageAccessClick.bind(this);
this.manageOutAccessClick = this.manageOutAccessClick.bind(this);
this.state = {isAccessed: false};
}
//Function to handle button change and message change on the basis of the flag
manageAccessClick() {
this.setState({isAccessed: true});
}
manageOutAccessClick() {
//Changing flag to false
this.setState({isAccessed: false});
}
render() {
//Getting the value of the value of the isAccessed to handle the display work
constisAccessed = this.state.isAccessed;
let ClickableButton;
//checking the flag status
if (isAccessed) {
ClickableButton = <OutAccessButtononClick={this.manageOutAccessClick} />;
} else {
ClickableButton = <AccessButtononClick={this.manageAccessClick} />;
}
return (
<div>
<Welcome isAccessed={isAccessed} />
{ClickableButton}
</div>
);
}
}
function WelcomeMsgUser(props) {
return <h1>Hello Dear you have access</h1>;
}
function WelcomeMsgGuest(props) {
return <h1>Please Click to Access.</h1>;
}
//Function to display different different contents using operator
function Welcome(props) {
constisAccessed = props.isAccessed;
if (isAccessed) {
return <WelcomeMsgUser />;
}
return <WelcomeMsgGuest />;
}
//Initial button to display access
function AccessButton(props) {
return (
<button onClick={props.onClick}>
Access
</button>
);
}
//Button after clicking the Access button
function OutAccessButton(props) {
return (
//Here we are calling and changing the button on call
<button onClick={props.onClick}>
Out Access
</button>
);
}
//Finally returning the all the combination of the react component to display
ReactDOM.render(
<AccessComponent />,
document.getElementById('main')
);HTML Parts,
This part is the html which is responsible to contain all the react components and to display them .
<div id="main"></div>CSS Parts,
Below is the css design for the example
* {
font-size:14;
margin: 1;
}
button {
height: 42px;
background: black;
color: red;
width: 202px;
}Output:
Below we have displayed two screens of examples out of it one is the screen before clicking the button access and another is the button after clicking the access, here on clicking the button and message both are changing.
Conclusion
From this tutorial, we learned about the basic concept of the react ternary operator and we also learned about the working of the react ternary operator. We saw the simple syntax for the ternary operator along with some important examples which explain more about the working of it.
Recommended Articles
This is a guide to React Ternary Operator. Here we also discuss the introduction, syntax, and working of Ternary Operator in react along with different examples and its code implementation. You may also have a look at the following articles to learn more –
