Inline If with Logical && Operator

Method 1: Inline if-else conditional (ternary) operator

Here, Logical && operator is a boolean operator which works the same in React as it works in Javascript. It takes 2 conditions as operands. If the first condition is True, it only evaluates the second condition. Here, instead of adding condition as a second operand, we can add react component. So, if the first condition becomes true, it only renders react component.

Syntax

Developers need to embed expression with the curly braces. If they need, they can wrap operands inside the parenthesis to keep the code clean.

{(condition)  &&  (React component or JSX code) }

When the condition evaluates True, It returns the right part (react component or JSX code) as an output…

Example: We will write a code to render the message according to the value of the ‘totalTask’ variable.

Javascript

// Filename - App.js
 
import React, { Component } from "react";
 
// Using inline if with logical && operator
class App extends Component {
    render() {
        const todoList = [];
        const totalTask = todoList.length;
        return (
            <div>
                <h1 style={{ color: "green" }}>
                    w3wiki
                </h1>
                {totalTask > 0 && (
                    <h2>
                        The user has total {totalTask} task
                        pending
                    </h2>
                )}
                {totalTask === 0 && (
                    <h2>
                        The user has not any pending task.
                    </h2>
                )}
            </div>
        );
    }
}
 
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

In the above image, the user can see that it show the message ‘User has no pending task’ as it evaluates (totalTask === 0) condition True.

What are inline conditional expressions in ReactJS ?

In React conditional rendering is the process of showing components based on a particular condition. With inline conditional expression in React, we can write the condition in a single line. For example, While building the to-do list app, developers should show a task only if any pending task is available otherwise they can show a message like “There is no pending task available.”

We can use inline Conditions in React with the following approaches

Table of Content

Inline if-else conditional (ternary) operator
Inline If with Logical && Operator

Tags:

#React-Questions #Web technologies #ReactJS #Web Technologies

Method 1: Inline if-else conditional (ternary) operator

Inline If with Logical && Operator

Syntax

Javascript

What are inline conditional expressions in ReactJS ?

Similar Reads

Contact Us