This content originally appeared on DEV Community and was authored by Cassidy Williams
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"
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>
}
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 />")
}
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!
This content originally appeared on DEV Community and was authored by Cassidy Williams
Cassidy Williams | Sciencx (2022-04-09T07:05:06+00:00) Make line breaks work when you render text in a React or Vue component. Retrieved from https://www.scien.cx/2022/04/09/make-line-breaks-work-when-you-render-text-in-a-react-or-vue-component/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.