Use if statement in React JSX

Question

Can you use a if statement in JSX like this?

    var chartGraphContent =
        

            if(this.state.modalityG         


        
      

Answer 1

Better to use with ternary Operator, By doing so you can also add else block to your code.

Try this:

var chartGraphContent =
        

            {this.state.modalityGraph['nca'] > 0 ?
                

                     
                
                : "Else Block"
            }
        
;

Update (Another method)

and in case for more complex and large condition you can call inline functions too to return your template , in this way you can avoid your code to become messy. here is an example.

var ifBlockCode = function ifBlockCode(){
    return (
        

             
        
    )
}

var elseBlockCode = function elseBlockCode(){
    return (
        Else Block
    )
}
var chartGraphContent =

    {this.state.modalityGraph['nca'] > 0 ?
        {this.ifBlockCode} : {this.elseBlockCode}
    }
;