/*

A demonstration of how to render different things in a React component depending on prop values. These three versions are completely equivalent.

*/

​

var Version1 = React.createClass({

  render: function(){

    var stuff;

    if (this.props.username) {

      stuff = <span>Hello {this.props.username}!</span>;

    } else {

      stuff = <span>Please log in.</span>;

    }

    return (

      <div>

        <h4>Important settings</h4>

        {stuff}

      </div>

    );

  }

});

​

var Version2 = React.createClass({

  render: function(){

    var stuff = this.props.username ? 

      <span>Hello {this.props.username}!</span>

      : <span>Please log in.</span>;

    return (

      <div>

        <h4>Important settings</h4>

        {stuff}

      </div>

    );

  }

});

​

var Version3 = React.createClass({

  render: function(){

    return (

      <div>

        <h4>Important settings</h4>

        {this.props.username ? 

          <span>Hello {this.props.username}!</span>

          : <span>Please log in.</span>

        }

      </div>

    );

  }

});

​

ReactDOM.render(

  <div>

    <Version1 username="David" />

    <Version1 />

    <hr/>

    <Version2 username="Steve" />

    <Version2 />

    <hr/>

    <Version3 username="Arwen" />

    <Version3 />

  </div>,

  document.body

);