title: Separating HTML to be rendered in React.js
body: <p>I'm evaluating the addition of react.js into a new web project that we're about to start. So far I'm loving the data-centric approach (feels a tiny bit like MVVM in that to update the view you do it indirectly by changing the data/state of your object, and then the view knows to represent that new state). I have a few concerns, one of which I'd like to get some feedback on here, since I'm trying to put together a set of standards for coding on this project.</p>
  
  <p>I would like to land on a pattern/norm where we try to declare our visual output/HTML in such a way that it's called out and explicit. I feel that to make this easy enough to maintain you need to be able to browse one of these JSX files (I'm relying on JSX) and see what the basic output is going to be rather quickly. I'd also like for the maintenance or the markup to be as distinct a task as possible from any logic employed to build it.</p>
  
  <p>So I've been trying to split out conditional markup 'chunks' into variables inside the render method - before the return statement - and then in-line them inside the main markup. I was hoping that I could employ the JSX markup hybrid trick (er, my name obviously... still unsure about the lexicon for all these new concepts) anywhere I wanted to, like so:</p>
  
  <pre><code>var sIcon = (&lt;i className='alert-success'&gt;&lt;/i&gt;);
  </code></pre>
  
  <p>And then later, something like:</p>
  
  <pre><code>&lt;input type='tel' id="userPhone" onChange={this._handleInputChange('userPhone')} /&gt;{sIcon}
  </code></pre>
  
  <p>So I was hoping to employ the ' (....)' to create in-line HTML and store that in a variable (since it has the advantage of being formatted as HTML in the IDE and stands out better), and later output it using the braces. To me it's more clear that this is output and I prefer it to "React.DOM.div", etc. Nothing at all is rendered, however, it just ignores the '<code>{sIcon}</code>' altogether when rendering.</p>
  
  <p>Is this possible? Am I just lousing up the syntax of it?</p>
  
  <p>Or is there another way others have devised to achieve greater HTML/logic separation in react components that I should try out?</p>
  
  <p>It's specifically failing when I declare a variable inside the render method, but initialize it to null and then <em>conditionally</em> try to set it later. So simply declaring a variable with JSX and then referring to it works, but declaring one with no value and then trying to assign JSX to it fails:</p>
  
  <pre><code>  var authorizedBlock = "";
    var sessionIdBlock = "";
    var eventCountBlock = "";
    var sIcon = "";
  
    var tempIcon = &lt;i className='fa fa-check-square-o' /&gt;;
    var tempIcon2;
  
    if (this.state.loginAttempted) {
       if (this.state.loginSuccessful) {
          authorizedBlock = React.DOM.div (null, "Success! Ye be logged in.");
          sessionIdBlock = React.DOM.div (null, "SessionId: " + this.state.sessionId);
          eventCountBlock = React.DOM.div(null, "Your events: " + this.state.userEventCount);
          tempIcon2 = &lt;i className='fa fa-check-square-o' /&gt;;
       }
    };
  
    return (
    &lt;div id='loginContainer'&gt;
       &lt;div className='row'&gt;
          &lt;div className='col-md-2'&gt;
             Phone:
          &lt;/div&gt;
          &lt;div className='col-md-2'&gt;
             &lt;div&gt;
                &lt;input type='tel' id="userPhone" onChange={this._handleInputChange('userPhone') } /&gt;
                {tempIcon}{tempIcon2}
             &lt;/div&gt;
             {attemptedBlock}
          &lt;/div&gt;
          &lt;div className='col-md-1'&gt;
             &lt;button onClick={this._requestCode} &gt;Get code&lt;/button&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;);
  </code></pre>
  
  <p>Note that may HTML may not be utterly well-formed here; it's a partial snippet and I didn't want to include the whole honking file, so forgive any copy/paste gaffs. But the point here is that given the above code, <code>tempIcon</code> will show up in the output but <code>tempIcon2</code> will not.</p>