Using React and trying to print a value exactly from {this.state.value} - reactjs

Question

I'm using React.js and in my state object of my App component, I have a value that contains \n characters and spaces.
this.state = {
value: "def foo():\n print('this is a function')\n\nfoo()"
}
However, when I try to show this value to the screen by wrapping this.state.value in a p tag like <p>{this.state.value}</p>, it simply prints out
def foo(): print('this is a function') foo()
without showing the spaces and \n characters. Is there any way I can get the value to print out exactly like how it's shown in the state object? Going into the React inspector on Chrome confirms that the value indeed matches the one in my state object.

Answer 1

This isn't specific to React but to how white space characters are treated in HTML. A new line can be displayed as <br> inside <p> and multiple spaces can be displayed as . While newline character and multiple spaces are displayed similarly to single space character.
It could be outputted as
<p>def foo():
print('this is a function')
foo()</p>
with same result.
In order to change that, the way how white space is displayed should be changed with white-space CSS property, e.g.:
<p style={{ 'white-space': 'pre' }}>
{this.state.value}
</p>
If the intention is to output the code with specified indentation and monospaced font, there's already <pre> tag that already has appropriate style by default, it can be used instead of <p>.

Answer 2

try to use string template with back-tick syntax like:
this.state = {
value: `def foo():
print('this is a function')
foo()`
}
EDIT: for better readability you can try to define constant before setState call:
const strTemplate = `def foo():
print('this is a function')
foo()`;
this.state = {
value: strTemplate
}
Let me know if it works :)

Answer 3

Try out this string:
this.state = {
value: "def foo():<br/> print('this is a function')<br/><br/>foo()"
}