Adding a new line in a JSX string inside a paragraph - React

Question

I have the following React code:

render() {
  const str = 'Line 1. **new-line** Line 2.';
  return (
    <p> {str} </p>
  );
}

I would like the output to be:

Line 1.
Line 2.

That is - to add a new line between the words. I have tried \n but it does not work.

How could this be accomplished?

Edit: The string is received from a server.

Answer 1

Set CSS-Style for the paragraph as below, it will break line on \n and wrap text according to parent width.

white-space: pre-wrap;

or

white-space: pre-line;