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

javascript reactjs react-jsx
Jack Allan picture Jack Allan · Mar 20, 2014 · Viewed 141.1k times · Source

How do I optionally include an element in JSX? Here is an example using a banner that should be in the component if it has been passed in. What I want to avoid is having to duplicate HTML tags in the if statement.

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

Answer

Jack Allan picture Jack Allan · Mar 20, 2014

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

Related questions

How to pass props to {this.props.children}

I'm trying to find the proper way to define some components which could be used in a generic way: <Parent> <Child value="1"> <Child value="2"> </Parent> There is a logic going on for …

Read More
Adding script tag to React/JSX

I have a relatively straightforward issue of trying to add inline scripting to a React component. What I have so far: 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } …

Read More
How to loop and render elements in React.js without an array of objects to map?

I'm trying to convert a jQuery component to React.js and one of the things I'm having difficulty with is rendering n number of elements based on a for loop. I understand this is not possible, or recommended and that …

Read More