Conditional rendering:  React 🚀
Tags: react, webdev, beginners
Published: 2020-11-22 09:01:07

####**What is Conditional rendering?**
<ul>
<li>Conditional rendering is the ability to render different UI markup based on certain conditions.</li>
<li>It is a way to render different elements or components based on a condition</li>
<li>Conditional rendering in React works the same way conditions work in JavaScript.</li>
</ul>

####**What are the types of Conditional rendering?**
<ol>
<li>if/else</li>
<li>Element Variables</li>
<li>Ternary Conditional Operator</li>
<li>Short Circuit Operator</li>
</ol>
***


####**1. if/else:**
<ul>
<li>if/else cannot be used inside return statement and JSX</li>
<li>You can use if/else statement in render()</li>
<li>Instead of this, you can use use ternary operator or logical && operator</li>
</ul>
```
import React, { Component } from 'react'

class Conditional extends Component {

  constructor (props){
    super(props)
    this.state = {
      userIsViraj : true,
    }
  }

  render() {

    if(this.state.userIsViraj){
      return(
        <div>Welcome Viraj!</div>
      )
    } else{
      return(
        <div>Welcome Guest!</div>
      )
    }
    
  }
}

export default Conditional;
```
***

####**2. Element Variables:**
<ul>
<li>Element variables is a simple variable which can hold the JSX element and it can be rendered when required.</li>
</ul>
```
import React, { Component } from 'react'

class Conditional extends Component {

  constructor (props){
    super(props)
    this.state = {
      isUserViraj : true,
    }
  }

  render() {

    let user
    if (this.state.isUserViraj) {
      user = <div>Welcome Viraj!</div>
    } else{
      user = <div>Welcome Guest!</div>
    }

    return(
      <div>{user}</div>
    )
 
  }
}

export default Conditional;
```
***


####**3. Ternary Conditional Operator:**
<ul>
<li>You can use JavaScript in JSX, but it becomes difficult when using statements like if, else within JSX.</li>
<li>Hence, if you want to use if/else statement in JSX then you can use ternary conditional operator
</ul>
```
import React, { Component } from 'react'

class Conditional extends Component {

  constructor (props){
    super(props)
    this.state = {
      userIsViraj : true,
    }
  }

  render() {
    return (
      <div>
        { this.state.userIsViraj ? (
          <div> Welcome Viraj! </div>
        ) :
        <div> Welcome Guest! </div> 
        }
      </div>
    )
  }
}

export default Conditional;
```
***


####**4. Short Circuit Operator:**
<ul>
<li>Short Circuit Operator includes the JavaScript logical && operator. </li>
<li>Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.</li>
</ul>
```
import React, { Component } from 'react'

class Conditional extends Component {

  constructor (props){
    super(props)
    this.state = {
      isUserViraj : true,
    }
  }

  render() {
    return (
      <div>
        { this.state.isUserViraj && 
          <div> 
            Welcome Viraj!
          </div> }
      </div>
    )
  }
}

export default Conditional;
```
Here, the message "Welcome Viraj!" will render only if this.state.isUserViraj is true otherwise it will render nothing.