How to Add If…Else Statements in React JSX

Sometimes, depending on the conditions, we need to perform various actions particularly in view layout of react application. To do so, we  are using the conditional statements inside the render block in react application. This tutorial explains how to perform conditional rendering in react & react native application using simple if and else statement and ternary expression.
As you already know, the React Native uses JSX which is a syntax extension to JavaScript. This syntax extension will be converted to regular JS objects during the compilation.

Example-1 :
In this example, we are going to use if and else statement for conditional rendering inside the render block. Lets check out the below example to build more understanding.
Depending upon loggedIn props,  conditional statement will execute.

• When user set loggedIn props to true, then it will execute if block.
• When user set loggedIn props to false, then it will execute else block.

<Example loggedIn={true} name="Skptricks" />

import React from "react";
import ReactDOM from "react-dom";

class Example extends React.Component {
  render() {
    let message;
    if (this.props.loggedIn) {
      message = (
        <span>
          <h2>{`Welcome, ${this.props.name}`}</h2>
          <p>You have successfully logged in !!! </p>
        </span>
      );
    } else {
      message = <h2>Please provide the valid details to login </h2>;
    }
    return (
      <div>
        <h1>Conditional rendering example in react</h1>
        {message}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example loggedIn={true} name="Skptricks" />, rootElement);

Output :



Example-2 :
In this example, we are going to use ternary expression (inline solution) for conditional rendering inside the render block. Lets check out the below example to build more understanding.
Depending upon loggedIn props,  conditional statement will execute.

• When user set loggedIn props to true, then it will execute if block.
• When user set loggedIn props to false, then it will execute else block.

import React from "react";
import ReactDOM from "react-dom";

class Example extends React.Component {
  render() {
    return (
      <div>
        <h1>Conditional rendering example in react</h1>
        {this.props.loggedIn ? (
          <span>
            <h2>{`Welcome, ${this.props.name}`}</h2>
            <p>You have successfully logged in !!! </p>
          </span>
        ) : (
          <h2>Please provide the valid details to login </h2>
        )}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example loggedIn={false} name="Skptricks" />, rootElement);

Output :




This is all about conditional rendering in react & react native application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.