CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Jim Peeters
Jim Peeters

Reputation: 2863

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>
    )
  })
}

Upvotes: 55

Views: 50662

Answers (6)

Alex
Alex

Reputation: 9429

If you also want to convert double newlines A\n\nB\nC to paragraphs <p>A</p><p>B<br/>C</p> The following can do the job for you:

(This solution also doesn't add extra <br /> to the last string without a newline)

import React from 'react'

// convert double newlines to paragraphs and single newlines to line breaks
export const NewlineText = ({ text }: { text: string }) => {
  const splitText = text.split('\n\n')

  if (splitText.length === 1) {
    return <NewlineToBreak text={text} />
  }

  return splitText.map((item, idx) =>
    item ? (
      <React.Fragment key={idx}>
        <p>
          <NewlineToBreak text={item} />
        </p>
      </React.Fragment>
    ) : null
  )
}

const NewlineToBreak = ({ text }: { text: string }) => {
  const splitText = text.split('\n')

  if (splitText.length === 1) {
    return text
  }

  return splitText.map((item, idx) =>
    item ? (
      <React.Fragment key={idx}>
        {item}
        <br />
      </React.Fragment>
    ) : null
  )
}

Use it: <NewlineText text={note} />

Upvotes: 0

Tom Prats
Tom Prats

Reputation: 7921

An alternative to this would be to use css to display it with line breaks. This also makes it easier to copy and paste 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

Upvotes: 168

tomloprod
tomloprod

Reputation: 7892

Your code works well:

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

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

Upvotes: 32

Eliecer Chicott
Eliecer Chicott

Reputation: 581

A little update for React newer versions

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

Upvotes: 4

jp06
jp06

Reputation: 335

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.

Upvotes: 8

Jim Peeters
Jim Peeters

Reputation: 2863

Another approach: 

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

Upvotes: 1

Related Questions