React display line breaks from saved textarea
There's no reason to use JS. You can easily tell the browser how to handle newline using the white-space CSS property:
white-space: pre-line;pre-line
Sequences of whitespace are collapsed. Lines are broken at newline characters, at
<br>, and as necessary to fill line boxes.
Check out this demo:
<style> #p_wrap { white-space: pre-line; }</style><textarea id="textarea"></textarea><p id="p_standard"></p><hr><p id="p_wrap"></p><script> textarea.addEventListener('keypress', function(e) { p_standard.textContent = e.target.value p_wrap.textContent = e.target.value })</script>
This is to be expected, you would need to convert the new line (\n) characters to HTML line breaks
An article about using it in react: React Newline to break (nl2br)
To quote article:
Because you know that everything in React is functions, you can't really do this
this.state.text.replace(/(?:\r\n|\r|\n)/g, '<br />')Since that would return a string with DOM nodes inside, that is not allowed either, because has to be only a string.
You then can try do something like this:
{this.props.section.text.split(“\n”).map(function(item) { return ( {item} <br/> )})}That is not allowed either because again React is pure functions and two functions can be next to each other.
tldr. Solution
{this.props.section.text.split(“\n”).map(function(item) { return ( <span> {item} <br/> </span> )})}Now we're wrapping each line-break in a span, and that works fine because span’s has display inline. Now we got a working nl2br line-break solution
The solution is to set the property white-space on the element displaying the content of your textarea:
white-space: pre-line;