title: Having issues getting a newline on my code
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Test extends React.Component{
  state={name: "John", numTimes: 2};
  
  render() {
    let output = ""
  
    for (let i = 1; i &lt;= this.state.numTimes; i++) {
      let evenOdd = i % 2
  
      if (evenOdd === 0) {
        output += i + ". Hello " + this.state.name + "!"
      } else {
        output += i + ". Hello " + this.state.name
      }
    }
  
    return &lt;p&gt;{output}&lt;/p&gt;
  }
  
  }
  ReactDOM.render(&lt;Test /&gt; , document.getElementById("react"));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="react"&gt;&lt;/div&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am setting up an application where it will take a users name by input and how many times they want their name to display.</p>
  
  <p>I have tried styling it, adding my own break line to the output either using "\n" and breaklines.</p>
  
  <pre><code>render() {
    let output = ""
  
    for (let i = 1; i &lt;= this.state.numTimes; i++) {
      let evenOdd = i % 2
  
      if (evenOdd === 0) {
        output += i + ". Hello " + this.state.name + "!"
      } else {
        output += i + ". Hello " + this.state.name
      }
    }
  
    return &lt;p&gt;{output}&lt;/p&gt;
  }
  </code></pre>
  
  <p>My for loop it will print out ! on even and nothing on odd so if they do 2 for the number the desired outcome would be</p>
  
  <p><br>
  1. Hello John
  <br>
  2. Hello John!
  <br></p>
  
  <p>etc...</p>
  
  <p>I don't get any errors just an incorrect output of...</p>
  
  <ol>
  <li>Hello John 2. Hello John!</li>
  </ol>