How to have conditional elements and keep DRY with Facebook React's JSX?

Just leave banner as being undefined and it does not get included.

What about this. Let's define a simple helping If component.

var If = React.createClass({    render: function() {        if (this.props.test) {            return this.props.children;        }        else {            return false;        }    }});

And use it this way:

render: function () {    return (        <div id="page">            <If test={this.state.banner}>                <div id="banner">{this.state.banner}</div>            </If>            <div id="other-content">                blah blah blah...            </div>        </div>    );}

UPDATE: As my answer is getting popular, I feel obligated to warn you about the biggest danger related to this solution. As pointed out in another answer, the code inside the <If /> component is executed always regardless of whether the condition is true or false. Therefore the following example will fail in case the banner is null (note the property access on the second line):

<If test={this.state.banner}>    <div id="banner">{this.state.banner.url}</div></If>

You have to be careful when you use it. I suggest reading other answers for alternative (safer) approaches.

UPDATE 2: Looking back, this approach is not only dangerous but also desperately cumbersome. It's a typical example of when a developer (me) tries to transfer patterns and approaches he knows from one area to another but it doesn't really work (in this case other template languages).

If you need a conditional element, do it like this:

render: function () {    return (        <div id="page">            {this.state.banner &&                <div id="banner">{this.state.banner}</div>}            <div id="other-content">                blah blah blah...            </div>        </div>    );}

If you also need the else branch, just use a ternary operator:

{this.state.banner ?   <div id="banner">{this.state.banner}</div> :   <div>There is no banner!</div>}

It's way shorter, more elegant and safe. I use it all the time. The only disadvantage is that you cannot do else if branching that easily but that is usually not that common.

Anyway, this is possible thanks to how logical operators in JavaScript work. The logical operators even allow little tricks like this:

<h3>{this.state.banner.title || 'Default banner title'}</h3>

Personally, I really think the ternary expressions show in (JSX In Depth) are the most natural way that conforms with the ReactJs standards.

See the following example. It's a little messy at first sight but works quite well.

<div id="page">  {this.state.banner ? (    <div id="banner">     <div class="another-div">       {this.state.banner}     </div>    </div>  ) :   null}   <div id="other-content">    blah blah blah...  </div></div>