<div id="app">
  </app>
body {
  background: #333;
  color: white;
}
/*
 Example for conditional rendering in React.js
 */

class Application extends React.Component {
  state = {
    truthyCondition: true,
    falseCondition: false,
    ifElseCondition: true,
    elementVariableCondition: true,
  };
  render() {
    let ele = null;
    if (this.state.elementVariableCondition) {
      ele = <h2>This Element will return if true</h2>;
    } else {
      ele = <h2>Otherwise this element will return </h2>;
    }

    return (
      <div>
        {this.state.truthyCondition && <h2> I Will be rendered as condition is truthy </h2>}

        {/*Unless*/}
        {this.state.falseCondition || <h2>Unless condition</h2>}

        {/*
  If-else condition
  */}
        {this.state.ifElseCondition ? (
          <h2>I will be returned if true </h2>
        ) : (
          <h2>Otherwise I will be returned if false</h2>
        )}
        {/*Using element variable*/}
        {ele}
      </div>
    );
  }
}

/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js