If you’ve ever wondered how to render the newline character (\n) in a string as an actual newline in your React app, read on. Imagine you have the following boilerplate code: import * as React from 'react'; import * as ReactDOM from 'react-dom'; ReactDOM.render( <div className="App"> </d…

Yeah :smiley: if your string can have html tag you should “validate” it

Also, you tried setting the tag in your stylesheet to display:block? Or using flex box to create a column?

Well I fixed this with: let newText = text.split('\n').map((item, i) => { return {item}; });

Sorry, I don’t understand what you mean.

Why try creating a new line in JavaScript when you’re essentially storing an array of tags? It would make more sense to me to change the way the elements are positioned on the page.

Because I have a text which changes when the state changes. That means that I have different lines depending on the state. I am using tags, to make that line break. Hope it makes sense. :stuck_out_tongue:

[image] Flopet17: let newText = text.split(‘\n’).map((item, i) => { return {item}; }); Only a little advice with ES6, if you have to return a function ( <tag></tag> babel transform it in a single function ) you can write in this way: let newText = text.split ('\n').map ((ite…

Yeah, good piece of advice! :slight_smile:

I see you marked this solved, but in case someone visits this later: If you are adding multiple lines of text with \n to a div, add the following to the css for the div in question: div { white-space: pre-wrap; } Simple example

Newline in react string [Solved]

Curriculum Help

Flopet17 December 23, 2016, 1:00pm 11

Yeah, good piece of advice!

Topic		Replies	Views
Escaping sequences in strings (simple solution!)	16	9267	November 9, 2019
How to add new line in string? Curriculum Help javascript	15	652132	June 9, 2019
Markdown previewer react	11	1280	June 16, 2020
Formatting in marked.js for a marked down previewer Curriculum Help javascript	2	1336	January 8, 2019
How to append a div to another div when enter key is pressed Curriculum Help javascript	4	9416	June 29, 2018

Newline in react string [Solved]

Related topics