Make line breaks work when you render text in a React or Vue component

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 
 I'm a JavaScript haiku 
 render my newlines"

But, those little
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 
 I'm a JavaScript haiku 
 render my newlines"function BeautifulHaiku() {  return <div>{haiku}</div>}

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

Replace
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(/
/g, "<br />")}

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

<p dangerouslySetInnerHTML={{__html: replaceWithBr()}} />

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

<p v-html="replaceWithBr()">{{haiku}}</p>

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 */}

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!