React.js app is removing whitespace in strings

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>);
}

In the future if you come across a weird scenario, try to reproduce it in the most simple env possible (HTML, CSS) and then gradually make things more complex, or the other way, start with what you have and then start to remove things until you focus on the origin of the problem. — vsync, Dec 20 '18 at 10:00

score 3 · Answer 1 · answered Dec 20 '18 at 09:37

3

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

answered Dec 20 '18 at 09:37

Doğancan Arabacı

3,934
2
17
25

This did not fix the issue. – bremen_matt Dec 20 '18 at 09:39
2

This should be a comment and not an answer. it's also not the correct answer since it does not explain why this is happening and how to properly solve it without hacks. – vsync Dec 20 '18 at 09:40
idk why @vsync is mad at this answer, this is exactly what I use StackOverflow for, quick solutions to my silly problems. Anyway, this was precisely what I needed. – Tushar Sadhwani Oct 30 '20 at 11:58

React.js app is removing whitespace in strings

1 Answers1