React output does not preserve line breaks

Question

Is there a way to preserve line breaks from user input. At the moment I am just getting the user input sending it to mongoDb and returning that text. However if my input is : "new line", my output would be "new line". Can anyone suggest a fix?

Did you check this? Might be useful: https://stackoverflow.com/questions/32469570/how-can-i-insert-a-line-break-into-a-text-component-in-react-native — norbitrial, Jan 14 '20 at 19:20

score 3 · Answer 1 · answered Jan 14 '20 at 19:30

3

Use css white-space for styling it.

.foo {
  white-space: pre-line;
}

answered Jan 14 '20 at 19:30

felixmosh

32,615
9
69
88

score 0 · Answer 2 · answered Sep 30 '21 at 17:18

a small addition to @FELIXMOSH's correct answer: also use word-wrap because white-space property can cause overflowing sometimes. And apply this css to the element that will host the mongodb data.

anyClass {
  white-space: pre-wrap;
  word-wrap: break-word; 
}

React output does not preserve line breaks

2 Answers2