title: React inline conditional, create multiple elements in 1 condition
body: <p>Newer to React, my apologies if this is simple.</p>
  
  <p>I am trying to create a notes app in Cordova with React. Everything is working fine, but I'm having trouble inserting a break after a component inline. I know that I could break this into 2 divs and use css to style them, but I am curious how I would achieve this with 1 div and breaks.</p>
  
  <p>So, what I am looking for</p>
  
  <pre><code>&lt;div id=id key=key&gt;Subject&lt;br/&gt;&lt;br/&gt;Body&lt;/div&gt;
  </code></pre>
  
  <p>React doesn't seem to like adding components like this. I can make it work if I use the condition twice:</p>
  
  <pre><code>render: function(){
      var data = this.props.data;
      return data.map(function(noteData){ 
                  return &lt;div id='note' key={noteData.id}&gt;{noteData.subj.length &gt; 0 ? noteData.subj: ''}{noteData.subj.length &gt; 0 ? &lt;br/&gt;: ''} {noteData.body}&lt;/div&gt;;
      });
  }
  </code></pre>
  
  <p>It doesn't allow for something like:</p>
  
  <pre><code>return &lt;div id='note' key={noteData.id}&gt;{noteData.subj.length &gt; 0 ? noteData.subj&lt;br/&gt;&lt;br/&gt;: ''}{noteData.body}&lt;/div&gt;;
  </code></pre>
  
  <p>It doesn't seem to allow for text (unless I'm doing something wrong)</p>
  
  <pre><code>"\n" or "&lt;br/&gt;", with or without brackets({"&lt;br /&gt;"}) eg.
  </code></pre>
  
  <p>I'm sure it has to do with how React creates elements, but... is there a single-function solution here? What is the correct way of doing this?</p>