score:84

Accepted answer

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

score:0

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.

score:0

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.

score:0

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

score:0

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

score:1

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.

score:1

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

score:1

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

score:7

Try this one,

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

score:10

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)

score:31

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

score:325

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


Related Query

More Query from same tag