How to render a multi-line text string in React

Suppose I have a text string that contains line-breaks, and I render it like this:

render() {
    var text = "One\nTwo\nThree";
    return <div>{text}</div>;
}

In HTML the line-breaks don't render as line-breaks. How should I do this in React? I don't want to convert to <br> tags and use dangerouslySetInnerHTML. Is there another way?

Make a new CSS-class

.display-linebreak {
  white-space: pre-line;
}

Display your text with that CSS-class

render() {
  const text = 'One \n Two \n Three';
  return ( 
     <div className="display-linebreak"> 
        {text} 
     </div>
  );
}

Renders with line-breaks (Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary). Like this:

One
Two
Three

You may also consider pre-wrap. More info here (CSS white-space Property).

You could try putting divs for each line

render() {
	return (<div>
		<div>{"One"}</div>
		<div>{"Two"}</div>
		<div>{"Three"}</div>
	</div>);
}

Or

render() {
	var text = "One\nTwo\nThree";
	return (
	<div>
		{text.split("\n").map((i,key) => {
			return <div key={key}>{i}</div>;
		})}
	</div>);
}

You could use CSS property "white-space: pre". I think this is the easiest way to handle this.

Here the cleanest solution (afaik):

   render(){
      return <pre>
             Line 1{"\n"}
             Line 2{"\n"}
             Line 3{"\n"}
      </pre>
   }

Instead of

 you can also use  you can also use <div style={{whiteSpace:"pre"}}>, or any other html block element (like span or p with this style attribute)


, or any other html block element (like  you can also use  you can also use <div style={{whiteSpace:"pre"}}>, or any other html block element (like span or p with this style attribute)


, or any other html block element (like span or p with this style attribute)


 or  you can also use  you can also use <div style={{whiteSpace:"pre"}}>, or any other html block element (like span or p with this style attribute)


, or any other html block element (like  you can also use  you can also use <div style={{whiteSpace:"pre"}}>, or any other html block element (like span or p with this style attribute)


, or any other html block element (like span or p with this style attribute)


 or p with this style attribute)


 with this style attribute)

Try this one,

render() {
    var text = "One\nTwo\nThree";
    return <div style={{whiteSpace: 'pre-line'}}>{text}</div>;
}

You can use -webkit-user-modify: read-write-plaintext-only; in your div. It will format and understand things like \n and \p for instance.

You can make use of textarea tag of html, later you can add the styling to the textarea tag. It pretty much solves your all issues including line breaks and tab spaces. Cheerzz...

eg: Your render will look something like below

render() {
    var text = "One\nTwo\nThree";
    return <textarea>{text}</textarea>;
}

Output:

One
Two
Three

<div style={{ whiteSpace: "break-spaces" }}> {JSON.stringify(state, null, " ")} </div>

Render your delimited text "My line one\nMy second line\nWhatevs..." inside a normal html textarea. I know it works because i just used it today ! Make the textarea readOnly if you must, and style accordingly.

You can safely run String.raw instead for this type of value.

const text = String.raw`One
Two
Three
`

render() {
  return <div style={{ whiteSpace: "pre" }}>{text}</div>
}

You can also just use a <pre> tag which effectively does the same thing, but its less semantically clear if you're already using that for other purposes in your app.

We can use package name dedent to render multiline text:

const multilineText = `
  This is line 1
  This is line 2
  This is line 3
`;

export default function App() {
  return (
    <>
      <div style={{ whiteSpace: "pre-wrap" }}>{dedent(multilineText)}</div>
    </>
  );
}

this example in react.js component,

it will insert each line into a new div element by using (map , split) and it is a good example for comments/posts to support ltr/rtl style component at the same time and here is a simple example :

<div> 
	{ ' this is first line \n this is second line \n this is third line '.split('\n').map( line => 
	<div  key={ Math.random() * 10} dir="auto"  style={{ textAlign: 'start'}}> {line}  </div> 
	)} 
</div>

also if your string data comming from API / react state you can use your string variable name as the follwing :

<div> 
	{ post_comments.split('\n').map( line => 
	<div  key={ Math.random() * 10}  dir="auto"  style={{textAlign: 'start'}}> {line} </div> 
	)} 
</div>

this is just example , and change it based on your case/requirements.

and if you like you can replace div tag with p tag as per your request .

i hope this helpful for you