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

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.

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;

A more traditional approach is to just create an array with your strings, with a <br /> tag in between. Arrays are, as of React v16 a valid return value for Elements.

class App extends React.Component {
  render() {
    const arr = ['Line 1. ', <br />, 'Line 2.'];
    return (
      <p> {arr} </p>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

If you are getting a string from some API, you could create such an array by finding all <br /> substrings and replace them with actual JSX <br />'s. The following code will take your string and do a string split on every instance of <br />. This will give you ['Line 1. ', '', 'Line 2.']. As you can see, every odd element in the array is where we want to push a JSX <br />. We can do that quite simply in a loop.

class App extends React.Component {
  render() {
    const str = 'Line 1. <br /> Line 2.';
    const arr = str.split(/<br \/>/);
    const resultArr = [];
    arr.forEach((item, i) => {
      if(i%2===0) resultArr.push(<br />);
      resultArr.push(item);      
    });
    return (
      <p> {resultArr} </p>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

The other approach is to either use dangeourslySetInnerHTML() or use template literals.

You could use template literals for that along with the css rule white-space: pre to preserve newlines. See my demo below:

class App extends React.Component {
  render() {
    const str = `Line 1.  
 Line 2.`;
    return (
      <p style={{whiteSpace: 'pre'}}> {str} </p>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

style={{ whiteSpace: 'break-spaces' }}

For that purpose you have to use something called dangerouslySetInnerHTML.

Example

render() {
  const str = 'Line 1. <br /> Line 2.';
  return (
    <p dangerouslySetInnerHTML={{ __html: str }}/>
  );
}

You could accomplish this by using CSS instead.

p {
    white-space: pre;
} 

You render then becomes:

const str = "Line 1.\nLine 2."
return (<p>{str}</p>)