title: Adjacent JSX elements must be wrapped in an enclosing tag with line break tag
body: <p>Imagine: </p>
  
  <pre><code>return (&lt;a href="{this.props.url}"&gt;{this.props.name}&lt;/a&gt;&lt;br&gt;)
  </code></pre>
  
  <p>also attempted with </p>
  
  <pre><code>return (&lt;a href="{this.props.url}"&gt;{this.props.name}&lt;/a&gt;&lt;br /&gt;)
  </code></pre>
  
  <p>While the script does run without issue, the JSX compiler is upset by the <code>&lt;br&gt;</code> tag, since its a lone wolf in the logic and has no open/close tag it just is.</p>
  
  <p>if on the other hand I remove the <code>&lt;br&gt;</code></p>
  
  <pre><code>return (&lt;a href="{this.props.url}"&gt;{this.props.name}&lt;/a&gt;)
  </code></pre>
  
  <p>there is no error thrown, pretty self explanatory as far as what the issue is. The question however is how to resolve the underlying problem. how can I have that tag (or its equivalent if need be). Be added after every one of the above rendering statements. </p>
  
  <p>Things to assume, this is a loop of urls/names that generate an html list of links on the page. Everything minus this factor thus far works.</p>
  
  <p>The underlying issue overall is a issue of aesthetics. I am using bootstrap, and in that things are fairly uniform and I have no desire to create one-off classes or inline styles to accommodate the line-break. This is just purely for the sake of maintainability down the road. </p>