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

Ternary Operator

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.

Logical Operator

AND && (Logical Operator)

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.

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.

OR || (Logical Operator)

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.

NOT ! (Logical Operator)

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.

if, else, else if

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

Switch Statement

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