CODEWITHSUNDEEP
javascripthtmlcssreactjs
Poogy
Poogy

Reputation: 2757

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.

Upvotes: 43

Views: 78929

Answers (9)

quine9997
quine9997

Reputation: 834

Open this html page with your browser.

Mine is chromium 115.0.5790.98

#ExampalReactNewLines.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>ExampalReactNewLines</title>
    <script src='https://unpkg.com/[email protected]/babel.js'></script>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

  </head>
  <body>
    <div id='root'></div>
    <script type='text/babel'>
function ExampalReactNewLines() 
{

return (
    
<div>    
{`

1 newline

2 newline

3 newline


7 newline





2 newline


15 newline














stop
`.split(/\n{100}/).map((i,key) => {return <pre key={key}>{i}</pre>;})
}    

</div>
 )
}




















/////////////////////////////////////////////////////////////////////////////////// 
/////////////////////////////////////////////////////////////////////////////////// 
      
      
      
      ReactDOM.render(<ExampalReactNewLines />, document.querySelector('#root'));
    </script>
  </body>
</html>

Upvotes: 0

R. Mahbub
R. Mahbub

Reputation: 432

You can easily achieve it by doing the following:

myTextHere={<span>Hello<br />Hi</span>}

Output will be like this:

Hello
Hi

Upvotes: 1

NevetsKuro
NevetsKuro

Reputation: 986

Using CSS - (Simply add it to content's div. Wraps and adds new-line for every '\n' appended to content)

p {
    white-space: pre-wrap;
}

Use React's dangerouslySetInnerHTML - (Apply to parents div and parse any tags in the value field. Works similar to innerHTML.)

<div dangerouslySetInnerHTML={{__html: '<p>First &middot; Second</p>'}}></div>

Link for more information about dangerouslySetInnerHTML:
[https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml][1]

Upvotes: 4

MikeyE
MikeyE

Reputation: 1867

This is what I do.

<span>{<br/>}</span>

Upvotes: 2

Geoffrey Hale
Geoffrey Hale

Reputation: 11438

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

Upvotes: 11

Eltaf Hussain
Eltaf Hussain

Reputation: 3401

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;

Upvotes: 89

Chris
Chris

Reputation: 59491

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>

Upvotes: 18

TryingToImprove
TryingToImprove

Reputation: 7407

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>)

Upvotes: 6

Akhil P
Akhil P

Reputation: 1620

For that purpose you have to use something called dangerouslySetInnerHTML.

Example

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

Upvotes: 3

Related Questions