How to render multi line text with return characters in React component?

Question

In my react app, I receive a text from the API like "Fully furnished luxury apartment for sale in San Fransisco.↵↵The following features are available↵↵-Water↵ -T...".

I need to render this text as a multiline text with blank lines instead of these return characters. I used the following method to render the text.

<div className="previewSectionDesc">
  {<div dangerouslySetInnerHTML={{ __html: propertyDescription }} />}
</div>

But this is what I received with no blank lines.

Fully furnished luxury apartment for sale in San Fransisco. The following features are available -Water -T...

How can I solve this?

If the string is just text and line breaks, why not split up the string based on newline characters and then build a new element with <br/> tags instead, and avoid using the rather nasty dangerouslySetInnerHTML altogether? — DBS
– DBS, Commented Dec 18, 2020 at 14:13
Check this question stackoverflow.com/questions/31001066/… — Abdelrhman Arnos
– Abdelrhman Arnos, Commented Dec 18, 2020 at 14:16

Alexander van Oostenrijk · Accepted Answer · 2020-12-18 14:21:47Z

1

HTML will ignore the line breaks in your text when displaying it. If you want to use dangerouslySetInnerHTML, you'll have to convert them to <br/> elements first:

<div className="previewSectionDesc">
  <div dangerouslySetInnerHTML={{ __html: propertyDescription.replace(/\n/g,'<br/>') }} />
</div>

You could also dispense with dangerouslySetInnerHTML by splitting your text on linebreaks, then showing each line as a <div>:

<div className="previewSectionDesc">
  {propertyDescription.split('\n').map((line, idx) => <div key={idx}>line</div>)}
</div>

Still another way would using the <pre> element rather than a <div>, where HTML will preserve your linebreaks.

answered Dec 18, 2020 at 14:21

Alexander van Oostenrijk

4,7843 gold badges25 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Johns Over a year ago

Thank you. All three methods worked for me. Can you please elaborate a little, why everyone advice to use dangerouslySetInnerHTML as the last option? What is the drawback?

Alexander van Oostenrijk Over a year ago

Using dangerouslySetInnerHTML can open you up to a cross-site scripting (XSS) attack.

Orinayo Oyelade · Accepted Answer · 2020-12-18 14:25:55Z

1

You can use the css white-space property to preserve the whitespace received. white-space: pre;

answered Dec 18, 2020 at 14:25

Orinayo Oyelade

3473 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to render multi line text with return characters in React component?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related