As per DOC:

if-else statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction.

We can't use if-else statement or any other statement directly inside JSX, only expressions are allowed.

Expressions inside JSX:

Wou can embed any JavaScript expression in JSX by wrapping it in curly braces.

To put any expression we need to use {}, so instead of if use && operator or ternary operator for conditional rendering.

By using ternary operator:

var chartGraphContent =
<div className={"chartContent"}>
    {
        this.state.modalityGraph['nca'] > 0 ?
            <div className={"chart-container"}>
                <Chart
                    chartType="ColumnChart"
                    data = { this.state.modalityGraph?this.state.modalityGraph.chartData['units']:emptyDataRows }
                    options={chartOptions}
                    graph_id="modalitiesChart"
                    width="100%"
                    height="250px"
                /> 
            </div>
        :null
    }
</div>;

By using && operator:

var chartGraphContent =
<div className={"chartContent"}>
    {
        this.state.modalityGraph['nca'] > 0 &&
            <div className={"chart-container"}>
                <Chart
                    chartType="ColumnChart"
                    data = { this.state.modalityGraph?this.state.modalityGraph.chartData['units']:emptyDataRows }
                    options={chartOptions}
                    graph_id="modalitiesChart"
                    width="100%"
                    height="250px"
                /> 
            </div>
    }
</div>;

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

Try this:

var chartGraphContent =
        <div className={"chartContent"}>
            {this.state.modalityGraph['nca'] > 0 ?
                <div className={"chart-container"}>
                    <Chart
                        chartType="ColumnChart"
                        data = { this.state.modalityGraph?this.state.modalityGraph.chartData['units']:emptyDataRows }
                        options={chartOptions}
                        graph_id="modalitiesChart"
                        width="100%"
                        height="250px"
                    /> 
                </div>
                : "<span>Else Block</span>"
            }
        </div>;

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 (
        <div className={"chart-container"}>
            <Chart
                chartType="ColumnChart"
                data = { this.state.modalityGraph?this.state.modalityGraph.chartData['units']:emptyDataRows }
                options={chartOptions}
                graph_id="modalitiesChart"
                width="100%"
                height="250px"
            /> 
        </div>
    )
}

var elseBlockCode = function elseBlockCode(){
    return (
        <span>Else Block</span>
    )
}
var chartGraphContent =
<div className={"chartContent"}>
    {this.state.modalityGraph['nca'] > 0 ?
        {this.ifBlockCode} : {this.elseBlockCode}
    }
</div>;

To work around the limitation that JSX supports expressions only: (if control blocks are statements)

• Just use multiple return statements wrapped by your control block.

The keyword return introduces a statement. You can simply wrap you JSX logic into control structure scopes, where each case is its own return statement (nobody ever said you can't use two return statements!)

if (case) {
  return <JSX prop=true/>
else {
  return <JSX prop=false/>
}

Side note about expressions vs statements

Expressions must be pure, which is probably why JSX (function calls) accept them. The if-blocks are not pure in the sense that they can introduce side effects (they can wrap multiple expressions, some of which must have nothing to do with the resulting value). Expressions cannot do this because they must return a value. In that sense, they are pure. They could introduce effects, but these would be effects and not side effects.

e.g. this silly example of an expression that has effects but I would argue that they are not side effects because the expression does exactly one thing in each case.

const a: void = v ? console.log("a") : console.log("b");