Make Line Breaks Work When You Render Text In A React Or Vue ...

Home » How To Line Break In React » Make Line Breaks Work When You Render Text In A React Or Vue ...

Maybe your like

Sometimes you will get a string that you can't control in your React components (like from a CMS or API). It might look something like this:

"Wow I am so cool \n I'm a JavaScript haiku \n render my newlines" Enter fullscreen mode Exit fullscreen mode

But, those little \n characters aren't respected if you were to put it into a React (or Vue) component, like this:

const haiku = "Wow I am so cool \n I'm a JavaScript haiku \n render my newlines" function BeautifulHaiku() { return <div>{haiku}</div> } Enter fullscreen mode Exit fullscreen mode

If you want to change this behavior and get the newlines you want, you have a couple solid options.

Replace \n with <br />

The first thing you can do is split up the string and then render the resulting <br /> tags.

function replaceWithBr() { return haiku.replace(/\n/g, "<br />") } Enter fullscreen mode Exit fullscreen mode

In React, you'd then use dangerouslySetInnerHTML to make that work:

<p dangerouslySetInnerHTML={{__html: replaceWithBr()}} /> Enter fullscreen mode Exit fullscreen mode

(this is named "dangerous" for a reason, and it's not because the React team wants to seem cool, it's because you gotta be careful about what you put in there to avoid malicious scripts)

And in Vue, you'd use v-html to make that work:

<p v-html="replaceWithBr()">{{haiku}}</p> Enter fullscreen mode Exit fullscreen mode

Use CSS white-space

The other way you can do this is by using the white-space CSS property and set it to either pre-wrap or pre-line.

.css-fix { white-space: pre-wrap; /* or pre-line */ } Enter fullscreen mode Exit fullscreen mode

These two make sure that the text wraps when line breaks are in the content, and pre-line specifically collapses multiple whitespaces into one.

This can be applied to both React and Vue!

Prove it, Cassidy

Fine, twist my arm!

Here's the React examples in action:

And here's the Vue examples!

"They're different but they're friends" - DJ Khaled

Full disclosure: I am not a Vue developer, this just happened to work for me when I tried it. I know this is "proper" in React but I can't speak for Vue because I am a noob. Good luck, have fun, make good choices, be kind, write code.

I hope this was helpful for you!

Tag » How To Line Break In React