title: JSX within curly braces
body: <p>I have a conditional statement to print a field if it is not null that I want followed by a line break.  This statement exists within a <code>&lt;div&gt;&lt;/div&gt;</code>.  It seems that <code>&lt;br /&gt;</code> (or any other jsx) cannot be used within <code>{...}</code> statements.</p>
  
  <p>What I want to happen is to conditionally print my string and a newline if the condition is met.  Below I will show what is actually happening.</p>
  
  <pre><code>&lt;div&gt;
      {this.props.string ? "$" + this.props.string + &lt;br /&gt; : null}
  &lt;/div&gt;
  </code></pre>
  
  <p>In this case, <code>&lt;br /&gt;</code> renders as <code>[object Object]</code>.</p>
  
  <p>I have also tried</p>
  
  <pre><code>&lt;div&gt;
      {this.props.string ? "$" + this.props.string + "\n" : null}
  &lt;/div&gt;
  </code></pre>
  
  <p>But "\n" is printed literally.</p>
  
  <p>Why is <code>&lt;br /&gt;</code> being rendered as <code>[object Object]</code>?  What do I need to do to achieve my desired result?</p>
  
  <p>This question is different from the one found <a href="https://stackoverflow.com/questions/44492166/react-is-rendering-object-object-rather-than-the-jsx">here</a> in that I am looking for an inline solution rather than having to build an array with a single value.</p>