With React, we can create powerful web applications that provide state of the art UI and a high level of interactivity. When it comes to providing interactivity inside the application, we the developers always think of conditional rendering.
Conditional rendering refers to the way in which we can render different UI markup based on specified conditions. For example, we can show the login button when a user is logged out and show the logout button when a user is logged in. This depends on the condition if the user is logged in or out. Such conditions are applied everywhere in the app to give the utmost user interactivity with changing UI elements on the basis of user actions. These conditional renderings are applied in many cases such as rendering the response from API call, updating the UI elements based on different functions, showing and hiding UI elements, providing access to different features, etc. And in this article, we are going through five different ways to implement these conditional rendering for JSX elements in React ecosystem.
Let's get started!
1.If…else
The if…else conditional statement enables us to trigger a certain set of programming actions if a condition checks to true else perform some other operations. It is the most simple way to implement the conditional execution of the certain task. If something is true then do this else do that.
Well, the If...else conditional rendering statement can be applied directly to render out the JSX elements as well in React Native. A simple example of conditional rendering using If...else is provided in the code snippet below:
render(){
const {isRendered} = this.state;
if(isRendered){
return <Text>Rendered is true</Text>
}else{
return <Text>Rendered is false</Text>
}
}
Here, if the isRendered Boolean statement is true then, it returns the JSX element inside it else it returns another. The cool thing is if the first If the statement is true, then other statements with else are not checked at all. But, If the statement is always checked. In the case of a large application, such conditional rendering on a large logical code block can affect the performance of the overall app. Nonetheless, If...else statement is easy to understand use for simple conditions.
2.Using Element Variables
Element variables are simple JavaScript variables that hold the JSX elements or statements in React Native. They help to simplify the code and make it clear and concise. It prevents from applying large code block in the template code as well. With element variables, we can simply devise the logic outside the template code and just call the element variable inside the template that returns the required JSX element.
A standard example for use of Element variable is shown in the code snippet below:
render(){
const {isRendered} = this.state;
let renderText;
if(isRendered){
renderText = <Text>Rendered is true</Text>;
}else{
renderText = <Text>Rendered is false</Text>;
}
return (
<View>
{renderText}
</View>
)
}
Here, the actual conditional logic is outside the template code. The JSX element to be rendered is stored in the renderText element variable on the basis of the condition inside If...else statement. Then, the element variable is directly called inside the render template which returns the JSX element based on the condition. Moreover, it also prevents the use of multiple return statements inside the template code.
View Website
View Website
View Website
3.Switch Statement
The Switch statement is in any way similar to If...else statement. Here, the only difference is the conditional statement is inside the switch on the basis of which the statements inside the cases are executed. The expected results on the basis of condition inside the switch statement are kept in the case statement which in turn returns the JSX elements.
The standard us of conditional rendering using Switch statement is provided in the code snippet below:
render(){
const {isRendered} = this.state;
switch (isRendered) {
case true:
return <Text>Rendered is true</Text>;
break;
case false:
return <Text>Rendered is false</Text>;
break;
default:
return null;
}
}
4.Ternary Operators
Ternary Operator came into play in JavaScript to shorten the If...else statements. Basically, the functionality they both have in offer are the same. The Ternary Operator is the shortcut for the If...else statement. It takes three operands. The first statement states the condition, the second part is the return statement if the condition in the first statement is true and the third part is the return statement if the condition in the first statement is false. The basic syntax is:
(condition) ? return statement if true: return statement if false
The '?' syntax is an operator that asks if the condition is true. If true, the statement before ':' is executed else the statement after ':'.
Here, we can use this ternary operator to conditionally return the JSX elements. The simple example is provided in the code snippet below:
render(){
const {isRendered} = this.state;
return(
<View>
{(isRendered)? <Text>Rendered is true</Text> : <Text>Rendered is false</Text> }
</View>
)
}
Here, we can see the use of the ternary operator to return the JSX statement directly in the template. The use of this operator is very high in programming nowadays because it simplifies the statement. We can use it with the Element variable as well.
5.Logical &&
Logical && in simple terms is an operator that helps to return the statement only if the condition specified is correct else return nothing. Its use is superb when there is a case of returning only one statement if the condition is true. There is no false statement to be executed. It specifies that the operation should be executed only if the condition is true else execute nothing. It greatly reduces the coding implementation as there is no need of writing the statement if the condition is false. In simple words, it removes the else statement from If...else.
The standard use of Logical && is shown in the code snippet below:
render(){
const {isRendered} = this.state;
return(
<View>
{(isRendered) && <Text>Rendered is true</Text>}
{(!isRendered) && <Text>Rendered is false</Text>}
</View>
)
}
Here, if isRendered is true then the JSX element on the right side of && syntax will be visible in the UI otherwise it will not even exist in the UI. It prevents the unnecessary extending of conditional code and helps to minimize the conditional check while performing the conditional rendering. Overall, it improves the performance and also makes the code clean and concise.
Conclusion
The main goal of this article was to present the ways of performing conditional rendering of JSX elements in the React ecosystem. The examples are straightforward, and the explanation is also easy to understand. For beginners, the JSX elements in React may be confusing. But, it is simple when we get the hang of it. These conditional rendering styles are used in high frequency in any programming technologies. We should always find the accurate conditional rendering technique to be used in the correct place while writing our code. It also impacts the overall performance of the app and makes the code look standard as well as easy to understand. So, make sure to apply these conditional rendering.
Comments (0)