Types Of React 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.

There are some ways to implement conditional rendering:

• If…else… statement.
• Switch statement.
• Conditional operator.
• Preventing rendering with null.
• Short circuit && operator.

Types of React Conditional Rendering

If else Statement

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
} 

In react, if else statement works same as any programming language or JavaScript. Let’s understand this using an example,

import React from 'react';
class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      time: '8am'
    }

  }
  render(){
    if (this.state.time.endsWith("am")){
      return <h1> GOOD MORNING</h1>
    }
    else{
      return <h1>GOOD NIGHT</h1>
    }
  }
}
export default App;

Here we have declared a state element time and its values is ‘8am’. Now in render, we have included if condition where we will check weather time’s value ends with am, if yes then it will print the message good morning, and if it’s false then good night will be rendered on screen.

Output

Switch Statement

Also switch a conditional statement where we can add cases for true or false. We can use switch like programming language.

Syntax

switch(condition){
	case 1:
				return //code
				break;
	case 2:
				return //code
				break;

Here, if the condition becomes true, then it matches with cases. Whichever case matches, then code of that case will get executed and breaks it, so other cases won’t get execute.

import React from 'react';
class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      time: '8am'
    }

  }
  render(){
    switch(this.state.time.endsWith('pm')){
      case true:
        return <h1>GOOD MORNING</h1>
        break;
      
      case false:
        return <h1>GOOD NIGHT</h1>
        break;
    }
  }
}
export default App;

Again, we have used same example like in if else statement, here condition will check then if the result will be compared with cases, then any of the case get matched with the result then that block of code will get executed also we have added break statement with this remaining cases won’t compare to result, so rendering will be slightly fast.

Output

Conditional Operator

Conditional operator is too good and simple operator to check condition, It is also known as sigle line condition. It is actually too famous in developer, and they frequently use this conditional operator, so it is much more important.

Syntax

condition? expression1: expression2

Here we have to do is put condition before question mark (?), then we put 2 expression one for true and other one for false condition result.

Note: Always put result expression for true condition at first, and second expression will be for false condition.

import React from 'react';
class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      time: '8am'
    }

  }
  render(){
    return this.state.time.endsWith('am')?<h1> GOOD MORNING</h1>: <h1>GOOD NIGHT</h1>
    }
}
export default App;

In here we have used a conditional operator which is awesome because we just need to write one line to check a condition.

Output

Preventing Rendering With null

If you want to hide an expression or component when a certain condition becomes true, then null helps you to do that. Basically, we will check here some condition if it gets true then you can return null, so that expression won’t show.

import React from 'react';
class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      time: '8am'
    }

  }
  render(){
    return()=>{
      if(this.state.time.endsWith('am')){
        return null;
      }
    }
 }
}
export default App;

In here, we are returning null when time’s value ends with ‘am’ then this will return null, so resultant output will be blank screen and if you try to render something after this then also it won’t get rendered.

Short Circuit && Operator

Short Circuit && Operator is the interesting one. Because if you apply this operator, it will check the condition if it is true, then it will execute or render the expression present on the right side of the condition. And if the condition is false, then simply whatever present on the right side of the condition, it will simply get skipped.

We can use this operator when we need to render an element if only condition becomes true, and nothing should render on screen when condition is false.

import React from 'react';
class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      time: '8am'
    }

  }
  render(){
    return this.state.time.endsWith('am')&& <h1>GOOD MORNING</h1>
      
    }
 }

export default App;

Here we added true condition so h1 will render on screen, in case if we add some wrong condition, and we put some text right next to it then that expression won’t render on screen.

Output