React.js app is removing whitespace in strings [duplicate]

Question

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

render() {

    return (<div>
               <div>{"average time: " + 5}</div>
               <div>{"best    time: " + 1}</div>             
            </div>);
}

then the rendered output removes the spaces I have in the second line, yielding an output that looks like

average time: 5
best time: 1

However, I want the output to look like

average time: 5
best    time: 1

How do I achieve that?

Elsewhere, I read that adding a className with display: block would fix this, but that did not help. Specifically, I tried this:

render() {

    return (<div>
               <div className="stats_entry">{"average time: " + 5}</div>
               <div className="stats_entry">{"best    time: " + 1}</div>             
            </div>);
}

where the css file has

.stats_entry {
  display: block;
}

EDIT:

Per suggestion, I tried changing the css to

.stats_entry {
  white-space: pre;
}

but this did not fix the issue.

EDIT:

wrapping the text with pre solved the issue:

render() {

    return (<div>
               <div><pre>{"average time: " + 5}</pre></div>
               <div><pre>{"best    time: " + 1}</pre></div>             
            </div>);
}

Answer 1

You should use white-space: pre; in your css