How to use whiteSpace: 'pre-wrap' on React

Question

How can I use the style whiteSpace: \'pre-wrap\' on React

I have a div that need to render the text using the format with spaces

render() {
   


        
      

Answer 1

You can use dangerouslySetInnerHTML but this is, well, dangerous. :) What else you can do, which is what we do in our app, is convert the string to React elements, for example to render line-breaks:

text.split("\n").map((text, i) => i ? [
, text] : text)

You can make this into a function or a component like .

Example on CodePen.

In our case we also tried using whiteSpace and found that none of the options quite gave us what we wanted.