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>

Answer 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

Answer 2

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