Preserve space in React rendered element

Question

From my backend service a string containing spaces is returned. When I console.log this value in my render method it shows the raw string with spaces.

The rendered element, however, is missing the values.

Example:

const a = "I am a text string"

is different from:

const a = "I  am a text string"

(Notice the extra space between "I" and "am".

The render method seems to be removing the extra space from my rendered output.

This is just an example, but the raw data that I try to show the end user has to contain the extra space. How can I force React to render the raw string, instead of doing some kind of text-formatting on it?

Answer 1

I am not sure if React JS messes up the space as it's just HTML. Use the following CSS on the element:

white-space: pre-wrap;

Working Demo: wmnk7rmq8 - CodeSandbox