title: React not passing along properties when rendering in variable
body: <p>I'm writing a reusable component for menu itens, but React is not passing along the properties to the HTML when I render it in a variable.
  I'm using Browserify with the reactify tranform.</p>
  
  <p>Here is the component code:</p>
  
  <pre><code>var React = require('react');
  var ReactPropTypes = React.PropTypes;
  
  
  
  var Menu = React.createClass({
  
    propTypes: {
      route: React.PropTypes.string,
      key: React.PropTypes.string.isRequired
    },
  
    render: function() {
      //alert(this.props.route);
      var routeName = this.props.route;
      var content = null;
      if (routeName) {
          content = (&lt;a href="{routeName}"&gt;
                        {this.props.children}
                     &lt;/a&gt;);
      } else {
          content = (&lt;a&gt;{this.props.children}&lt;/a&gt;);
      }
      return (&lt;li key="{this.props.key}"&gt;{content}&lt;/li&gt;);
    }
  
  });
  
  
  module.exports = Menu;
  </code></pre>
  
  <p>The final HTML output is:</p>
  
  <pre><code>&lt;li data-reactid=".0.0.2.0.$home"&gt;
      &lt;a href="{routeName}" data reactid=".0.0.2.0.$home.0"&gt;Home&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>The key property is function properly, but the route property is not (the value is correct, but it is not rendering the way it should).</p>
  
  <p>If I change the render method to:</p>
  
  <pre><code>render: function() {
      //alert(this.props.route);
      var routeName = this.props.route;
      var content = null;
      if (routeName) {
          return (&lt;li key="{this.props.key}"&gt;
                      &lt;a href={routeName}&gt;{this.props.children}&lt;/a&gt;
                  &lt;/li&gt;)
      } else {
          return (&lt;li key="{this.props.key}"&gt;
                      &lt;a&gt;{this.props.children}&lt;/a&gt;
                  &lt;/li&gt;)
      }
  
  }
  </code></pre>
  
  <p>Now it works. Can anyone point me to why is this?</p>