title: Append string to JSX
body: <p>In the below code sample, I need to add the string " : " only if the <code>twitter</code> props is set. What is the right way to do this?</p>
  
  <pre><code>let User = React.createClass({
      render: function() {
          let twitter = (this.props.twitter) ? (this.renderTwitter(this.props.twitter)) : null;
          return (&lt;div&gt;{this.props.name} : {twitter}&lt;/div&gt;)
      },
      renderTwitter: function(twitter) {
          return (&lt;a href={'http://www.twitter.com/' + twitter} &gt;Twitter&lt;/a&gt;)
      }
  })
  
  
  let App = React.createClass( {
      render: function() {
          return (
              &lt;div&gt;
                  &lt;h1&gt;User List&lt;/h1&gt;
                  &lt;User name="User 1" twitter="handle1"/&gt;
                  &lt;User name="User 2"/&gt;
              &lt;/div&gt;
          )
      }
  })
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));
  </code></pre>
  
  <p>Tried the following:</p>
  
  <pre><code>render: function() {
      let twitter = (this.props.twitter) ? " : " + (this.renderTwitter(this.props.twitter)) : null;
      return (&lt;div&gt;{this.props.name} : {twitter}&lt;/div&gt;)
  }
  </code></pre>
  
  <p>Tried this as well:</p>
  
  <pre><code>renderTwitter: function(twitter) {
      return (: &lt;a href={'http://www.twitter.com/' + twitter} &gt;Twitter&lt;/a&gt;)
  }
  </code></pre>