title: React.js app is removing whitespace in strings
body: <p>I want to format some text in a React app, and for some reason, the whitespace is getting removed. For example, if I have I class with the render method </p>
  
  <pre><code>render() {
  
      return (&lt;div&gt;
                 &lt;div&gt;{"average time: " + 5}&lt;/div&gt;
                 &lt;div&gt;{"best    time: " + 1}&lt;/div&gt;             
              &lt;/div&gt;);
  }
  </code></pre>
  
  <p>then the rendered output removes the spaces I have in the second line, yielding an output that looks like </p>
  
  <pre><code>average time: 5
  best time: 1
  </code></pre>
  
  <p>However, I want the output to look like </p>
  
  <pre><code>average time: 5
  best    time: 1
  </code></pre>
  
  <p>How do I achieve that? </p>
  
  <p>Elsewhere, I read that adding a <code>className</code> with <code>display: block</code> would fix this, but that did not help. Specifically, I tried this:</p>
  
  <pre><code>render() {
  
      return (&lt;div&gt;
                 &lt;div className="stats_entry"&gt;{"average time: " + 5}&lt;/div&gt;
                 &lt;div className="stats_entry"&gt;{"best    time: " + 1}&lt;/div&gt;             
              &lt;/div&gt;);
  }
  </code></pre>
  
  <p>where the css file has </p>
  
  <pre><code>.stats_entry {
    display: block;
  }
  </code></pre>
  
  <p>EDIT: </p>
  
  <p>Per suggestion, I tried changing the css to </p>
  
  <pre><code>.stats_entry {
    white-space: pre;
  }
  </code></pre>
  
  <p>but this did not fix the issue.</p>
  
  <p>EDIT: </p>
  
  <p>wrapping the text with <code>pre</code> solved the issue:</p>
  
  <pre><code>render() {
  
      return (&lt;div&gt;
                 &lt;div&gt;&lt;pre&gt;{"average time: " + 5}&lt;/pre&gt;&lt;/div&gt;
                 &lt;div&gt;&lt;pre&gt;{"best    time: " + 1}&lt;/pre&gt;&lt;/div&gt;             
              &lt;/div&gt;);
  }
  </code></pre>