How to replace /n to linebreaks in react.js?

I am trying to replace every /n to a <br> tag in ReactJS. In my note.note object there is a string with multiple /n in it.

example note.note: test\ntest\ntest

What I have tried in ReactJS:

{
  note.note.split('\n').map(function( item, idx) {
    return (
        <span key={idx}>
          {item}
          <br/>
        </span>
    )
  })
}

Your code works well:

{
    note.note.split("\n").map(function(item, idx) {
        return (
            <span key={idx}>
                {item}
                <br/>
            </span>
         )
    })
}

NOTE:

The OP problem was with the backend which returns \\n and shows as \n in the XHR preview tab

React display line breaks from saved textarea, There's no reason to use JS. You can easily tell the browser how to handle newline using the white-space CSS property: white-space: pre-line;. Since that would return a string with DOM nodes inside, that is not allowed either, because has to be only a string. That is not allowed either because again React is pure functions and two

An alternative to this would be to use css to display it with line breaks. This also makes it easier to copy and past with the original line breaks as well as distinguishing between one break (\n) and two breaks (\n\n).

Just add the style white-space: pre-wrap; to your element.

<div style={{whiteSpace: "pre-wrap"}}>{note.note}</div>

There are additional white-space options if that doesn't do exactly what you'd like: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

React Newline to break (nl2br). Because you know that everything in , That is not allowed either because again React is pure functions and two functions… Now we're wrapping each line-break in a span, and that works fine I really like building stuff with React.js and Docker and also Meetups ❤ Changing children state from another component with React Hooks. This tells it to replace all instance of the \r\n then replace all \n than finally replace all \r. It goes through and removes all types of line breaks from the designated text string. The "gm" at the end of the regex statement signifies that the replacement should take place over many lines (m) and that it should happen more than once (g).

I just want to share this function I've been using for quite some time. It is similar to Jim Peeters' answer but no parent tags generated, just turning the \n to <br key="<index here>" />.

import React from 'react'

export const escapedNewLineToLineBreakTag = (string) => {
  return string.split('\n').map((item, index) => {
    return (index === 0) ? item : [<br key={index} />, item]
  })
}

You can also convert this to a bit of a long one-liner by omitting return and curly brackets.

export const escapedNewLineToLineBreakTag = (string) => string.split('\n').map((item, index) => (index === 0) ? item : [<br key={index} />, item])

Disclaimer: The logic behind is not from me but I can't remember where I found it. I just turned it into function form.

Newline in react string [Solved] - JavaScript, Why try creating a new line in JavaScript when you're essentially storing an array of <p> tags? It would make more sense to me to change the way the elements� I recently worked on website where I would allow users to pull text from an API. However, sometimes the text would be as long as 15,000 characters, and other times it would only be 1,500 characters…

Another approach:

{
    note.note.split('\n').map((item, idx) => {
        return (
          <span key={idx}>
            {item}
            <br/>
          </span>
        );
    })
}

javascript replace line breaks with br Code Example, string replace new line javascript � php remove line break � php replace Programa��o web com Node e Express Beneficiando-se da stack� Remove new line from a string. A String object is a sequential collection of System.Char objects that represent a string. The String object is Immutable , it cannot be modified once it created, that means every time you use any operation in the String object , you create a new String Object.

A little update for React newer versions

{
  note.note
    .split('\n')
    .map((item, idx) => {
      return (
        <React.Fragment key={idx}>
          {item}
          <br />
        </React.Fragment>
      )
    })
}

How to create a new line in JSX and Reactjs, How to create a new line in JSX and Reactjs. 17 April 2020 This will replace the \n in the string with a <br> to create a line break. Use with� It would appear that some people did this in a different order, as the classic ordering of \r\n (or 13 followed by 10, in ASCII), is carriage return first, followed by the newline. I’d be interested to hear if anyone knows of why it’s \r\n (13,10) instead of \n\r (10,13).

Remove Line Breaks with Javascript, replace(/(\r\n|\n|\r)/gm,"");. The second piece of code with the javascript replace method removes all three types of line breaks by using this bit of a regular� Render a React element to its initial HTML. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.

React Native Notes 3: How to insert a line break into a text , ~{“\n”} this one creates a new line into the Text Component. If you have any question, ask me :)� In the Replace With dialog box just hit the Space bar to enter a space Hit Find Next or Replace All to find your cells with to find all of your cells with the line breaks Click Replace or Replace All to replace the line breaks with space characters

yosuke-furukawa/react-nl2br: Newlines to for React, Newlines to for React . Contribute to yosuke-furukawa/react-nl2br development by creating an Newlines to <br /> for React in jsx. const React = require('react '); const nl2br = require('react-nl2br'); var Hello npm install react-nl2br -S� For example, the default behavior of git on Windows systems is to convert LF linebreaks to CRLF when checking out files, but to store the linebreaks as LF when committing a change. This will cause the linebreak-style rule to report errors if configured with the "unix" setting, because the files that ESLint sees will have CRLF linebreaks.

Comments
  • Can you clarify "doesn't work"? Seems like your logic is sound: jsfiddle.net/sn2qkgzs/1
  • yeah seems like replacing would be easier/cleaner, than splitting it up and reassembling it
  • @Jayce444 It's the commonly used way of doing a full replace in Javascript s.split("\n").join("<br/>"), for example
  • What is the difference with my method here? the only thing i see different is the .text after note.note ?
  • Hmm interesting. Good to know!
  • Your solution works. The problem was with me because it came back '//n' from my backend but it showed as '/n' in my XHR preview tab