How can I write an else if structure using React (JSX) - the ternary is not expressive enough : <p>I want to write the equivalent in react:</p>

<pre><code>if (this.props.conditionA) {
    &lt;span&gt;Condition A&lt;/span&gt;
} else if (this.props.conditionB) {
    &lt;span&gt;Condition B&lt;/span&gt;
} else {
    &lt;span&gt;Neither&lt;/span&gt;
}
</code></pre>

<p>So maybe</p>

<pre><code>render() {
    return (&lt;div&gt;
        {(function(){
            if (this.props.conditionA) {
                return &lt;span&gt;Condition A&lt;/span&gt;
            } else if (this.props.conditionB) {
                return &lt;span&gt;Condition B&lt;/span&gt;
            } else {
                return &lt;span&gt;Neither&lt;/span&gt;
            }
        }).call(this)}
    &lt;/div&gt;)
}
</code></pre>

<p>But that seems overly complex. Is there a better way?</p>
