Is there a way to have line breaks in text without using dangerouslySetInnerHTML?

Question

I need to replace \n to <br>. But it is taking this as in text.

How can I do that without using dangerouslySetInnerHTML?

Answer 1

var yourNewValueWithBr = yourOldValue.replace(/\n/g,"<br />");

After replacing this text, you will need to use dangerouslySetInnerHTML to render it as HTML.

Answer 2

This solution replaces \n to <br> and works without dangerouslySetInnerHTML:

render: function() {
  var lines = this.props.text.split("\\n").map(function(line, n){
      return (n == 0) ? [line] : [<br />, line];
  });
  return <div>{lines}</div>;
}

But if you need HTML formatting, and you're sure that your text is safe from XSS, I would recommend to stick with dangerouslySetInnerHTML and a regex replace like Chris Hawkes said.

Answer 3

Insert the text as you normally would, and fix the line breaks with CSS:

white-space: pre-wrap;

Don't use dangerouslySetInnerHTML unless you really have to.

Answer 4

You could use style={{whiteSpace: 'pre-wrap'}} for the wrapping div.

Now you will break line without dangerouslySetInnerHTML and <BR>

You can check browser compatibility over here: CSS SPEC