title: Best way of mixing code and html/content in JSX
body: <p>In a render method I have something like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;tr&gt;&lt;td&gt;Reason&lt;/td&gt;&lt;td&gt;
    {
        if (@props.result?.job?.result?.reason?)
         @props.result?.job?.result?.reason
        else
          "-"    
     }
  &lt;/td&gt;&lt;/tr&gt; 
  </code></pre>
  
  <p>(In CoffeeScript)</p>
  
  <p>It doesn't see right to me to mix the output (the text) with the code inside the {}</p>
  
  <p>However the React docs seem to suggest that they favour this:</p>
  
  <p>We've found that the best solution for this problem is to generate HTML and component trees directly from the JavaScript code such that you can use all of the expressive power of a real programming language to build UIs. <a href="https://facebook.github.io/react/docs/displaying-data.html" rel="nofollow">https://facebook.github.io/react/docs/displaying-data.html</a></p>
  
  <p>So. Is this right? Or is there a slightly better way of doing this? </p>