This post is a simple demonstration of how to render components with react, using conditional rendering😌.

In this part, we will see how react conditional rendering works, and how can we use React conditional rendering. In React, we can apply conditions on rendering time, this means we can decide on which condition which code should be rendered😧.

Basically, react conditional rendering is the process of delivering or rendering the component or element based on conditions.

Conditional Rendering in React⚛️

Conditional Rendering is a common feature that exists in every programming language, including javascript. In javascript, we usually write conditional rendering with“if else” statement, “switch case” statement, and ternary operator.

All of these methods are applicable to React. But the question is, How we can use them effectively?🤔

Conditional rendering means rendering only a certain part of your DOM based on true or false conditions.

As you might know, React has JSX markup that often we need to implement conditional logic for components there. However, we can’t use common “if else” or “switch case”statements directly in JSX. In JSX, we should use other conditional rendering methods like the ternary operator and && operator.

In some situations, you may want to render content based on the same condition, for example, if the user logged in we can show his profile, if he is not logged in then we have to show the login page. In this situation, conditional rendering comes into the picture in React JS😃.

4 different approaches👊

We will take a detailed🤓 look at all of them.

• if/else,
• element variables,
• ternary conditional operator
• short circuit operator (&&).

🎯 Method 1: If else Statement

This is the first method that all programmers know, the common if-else statement. We can use it anywhere in a React project.

Best Practices Summary😉

• Use anywhere outside JSX markup
• Or when you want to execute more than one line of code inside if-else block

You might have known about If else statement, if you have worked with any programming language. In case if you’re not aware of that, then just remember this syntax.

Syntax

if(condition)
{
 //if condition true then this block will execute
}
else{
//if condition false or wrong then else part will execute
}

Example:

import React, { Component } from 'react'
class UserGreeting extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoggedIn: true
    }
  }
  render() {
    if (this.state.isLoggedIn) {
      return (
        <div> Welcome Chhakuli </div>
      )
    } else {
      return (
        <div> Welcome User Name </div>
      )
    }
  }
}
export default UserGreeting

Now a better approach is the second approach of using element variables.

🎯 Method 2:Element Variables.

In this approach, you use javascript variables to store elements. This will help you conditionally render the entire component or only a part of the component as well😯.

let's see how

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: true
    };
  }

  render() {
    let { isLoggedIn } = this.state;
    let loginMessage;

    if (isLoggedIn) {
      loginMessage = <h1> Welcome Chhakuli</h1>;
    } else {
      loginMessage = <h1> Welcome Guest</h1>;
    }

    return (
      <div className="App">
        {loginMessage}
      </div>
    );
  }
}

export default App;

🎯 Method 3:Ternery operator

The ternary operator is a shortcut for a common if-else statement. With the ternary operator, you can write the conditional rendering inline, or in only one line of code.

Best practices Summary😉

• Use it to assign value for a conditional variable or function return value
• Or when you want to execute only one line of code
• Or for conditional rendering in JSX

Example

import React from "react";
export default function App() {
  let isLoggedIn = true;
  return  isLoggedIn ?
    (<h1> Welcome User Name </h1>) :
    (<h1> Welcome Guest </h1>) 
}

🎯 Method 4:Logical && Short Circuit

With the ternary operator, you can shorten the if-else statement and have a better choice for conditional rendering in JSX.

But, do you know that there is a simpler method than the ternary operator?🤔 A Short-circuit AND Operator can be used to replace an if statement like this.

Example

import React, { Component } from 'react'
class UserGreeting extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoggedIn: true
    }
  }
  render() {
    return (
      this.state.isLoggedIn && (<h1> Welcome User Name </h1>)
    )
  }
}
export default UserGreeting

CONGRATULATIONS💯🎉

Now you should have a solid understanding of how we use conditionals to determine the state of react apps and thanks a lot for making it through! 😄

I hope this helps someone out there!🤗