4 Ways to Render JSX Conditionally in React
Tags: react, jsx, conditional, webdev
Published: 2022-06-24 16:58:44



Rendering JSX conditionally is a very common and essential work in React. There are 4 ways in which we can render JSX conditionally in React:

1. Ternary Operator

2. Logical Operator

3. if, else, else if

4. Switch Statement

  
&nbsp;

Generally, developers don't use `if else` or `switch statement` inside JSX for conditional rendering. Because it takes more lines of code with  `if else` or `switch statement` than `ternary operator`  or `logical operator`. But when you have more than two conditions to deal with, you have to use `if else` or `switch statement`. 


&nbsp;

## Ternary Operator

&nbsp;



```jsx
function TernaryOperator() {

  return (
    <>     
        {
            /* Ternary Operator */
            
            'a'==='a' ? <p>Hi</p> : <p>Bye</p>
        } 
    </>
  )

}

export default TernaryOperator

```

>**Explanation**
>
> Only if the condition `'a'==='a'` is true,  `<p>Hi</p>` will be rendered one the screen. Otherwise,  `<p>Bye</p>`  will be rendered on the screen.


&nbsp;

> **Note:** 
>
> It's not a very realistic example because you would never compare `'a'==='a'` in a real-world application. But this comparison is not the main point here. The point is the use of the ternary operator. 





&nbsp; 

## Logical Operator 

&nbsp;




**AND `&&` (Logical Operator)**

&nbsp;

```jsx
function LogicalAnd() {

  return (
    <>     
        {
            /* Logical 'AND' Operator*/
            
            'a'==='a' && <p>Hi</p>
        } 
    </>
)

}

export default LogicalAnd
)
```

> **Explanation**
> 
> Only if the condition `'a'==='a'` is true,  `<p>Hi</p>` will be rendered on the screen.





&nbsp;

**OR `||` (Logical Operator)**

&nbsp;

```jsx
function LogicalOR({name, labelText}) {
    
  return (
    <>       
        /* Logical 'OR' Operator*/
         {labelText || name}      
    </>
  )
}

export default LogicalOR
```


> **Explanation:** 
>
> If  `labelText` and `name` both props are passed into this component, then `labelText` will be rendered on the screen. But if only one of them (`name` or `labelText` ) is passed as a prop, then that passed prop will be rendered on the screen. 




&nbsp;

**NOT `!` (Logical Operator)**

&nbsp;

```js

function LogicalNOT ({name})  { 

    /* Logical NOT Operator */
    if (!name) {  
      return null; 
    }              
  

    return <p>Hi! My name is {name}.</p>;
  }
  
 export default LogicalNOT

```

> **Explanation**
> 
> Only if the `name` prop is passed then `<p>Hi! My name is {name}.</p>` will be rendered on the screen, otherwise, nothing will render on the screen.


&nbsp;

>**Note**
>
> `if (!name) { return null }`, returning early like this is known as `Early Return`. `Early Return` is also called `Guard Clause` or `Bouncer Pattern`.

&nbsp;

## if, else, else if

&nbsp;

```jsx
function IfElse() {

    return ( 
      <>     
          {
            /*If else condition within an anonymous function*/
            
              (() => {
                  if('a'==='b') {
                          return (
                              <p>Hi</p>
                          )
                      } else if ('b'==='b') {
                          return (
                          <p>Hello</p>
                          )
                      } else {
                          return (
                              <p>Bye</p>
                          )
                      }
              })()  
          }  
      </>  
    )


}

export default IfElse
```


> **Note:** 
>
> Have to use an anonymous function (also need to immediately invoke the function ) 



&nbsp;

## Switch Statement

&nbsp;

```jsx
function SwitchStatement() {

  return ( 
    <>     
        {

           /*Switch Statement within an anonymous function*/

            (() => {
                switch(true) {
                        
                    case('a'==='b'): {
                            return (
                                <p>Hello</p>
                            )
                        }
                    break;
                        
                    case('a'==='a'): {
                        return (
                            <p>Hi</p>
                        )
                    }
                    break;
                    
                    default: {
                            return (
                                <p>Bye</p>
                            )
                        }
                    break;
                    }
            })()  
        }  
    </>  
)

}

export default SwitchStatement
```


> **Note:** 
>
> Have to use an anonymous function (also need to immediately invoke the function ) 



&nbsp;

That's it.😃 Thanks for reading.🎉