How to render a multi-line text string in React

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

Try this one,

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

Answer 5

Here the cleanest solution (afaik):

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

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

Answer 6

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

Answer 7

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.

Answer 8

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.

Answer 9

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

Answer 10

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>
    </>
  );
}

Answer 11

We preferred having <br/>s instead and are using this simple function component in our TypeScript project:

import React, { FunctionComponent } from "react"

export const Multiline: FunctionComponent<{ text: string }> = ({ text }) => (
  <>
    {text.split(/\n|\r\n/).map((segment, index) => (
      <>
        {index > 0 && <br />}
        {segment}
      </>
    ))}
  </>
)

Answer 12

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.

Answer 13

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

Answer 14

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/babel-standalone@6.26.0/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>