React display line breaks from saved textarea

Question

Using Facebook React. In a settings page, I have a multiline textarea where a user can enter multiline text (in my case, an address).

<textarea value={address} /> 

When I try to display the address, so something like {address}, it doesn't show the line breaks and is all on one line.

<p>{address}</p> 

Any ideas how to solve this?

Answer 1

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>