How can I have a line break display when displaying a string?

Question

I am importing a string from an api to display on a web page using react. The contents of the string is: "Name \n Last Name". How do I get React to display the line break contained in the string?

I am able to change to change the contents of the string on the backend of the api. I have tried both "\n" and the br tag, but neither seem to work.

My react code looks like this:

<div className="definition">
  {this.state.definition}
</div>

MCMatan · Accepted Answer · 2019-02-09 13:59:39Z

1

Two ways you could solve this issue:

1. Split the text you receive before rendering.

:

let newText = text.split('\n').map((item, i) => {
 return <p key={i}>{item}</p>;
});

2. Use white-space: pre-wrap;

:

div {
  white-space: pre-wrap;
}

Example: https://codepen.io/yuzu-r/pen/wobaMR

answered Feb 9, 2019 at 13:59

MCMatan

8,8736 gold badges53 silver badges87 bronze badges

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

Comments

S.Haviv · Accepted Answer · 2019-02-09 13:57:20Z

0

Add this to your style style={{ whiteSpace: 'pre-wrap' }}

answered Feb 9, 2019 at 13:57

S.Haviv

3072 silver badges14 bronze badges

Collectives™ on Stack Overflow

How can I have a line break display when displaying a string?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related