I read in this json text string and it refuses to display with a line break

Question

I have a peace of text in a json that looks like this "I want a new line\nhere".

I have this code that show the text but first replace the \n with a <br />:

<p className="subtitle is-5 has-text-white has-text-weight-light summary-text">
  {Resume.basics.summary.replace(/(?:\r\n|\r|\n)/g, '<br />&nbsp')}
</p>

And the Resume.basic.summery is this json:

"basics": {
    "name": "Greta Thunberg",
    "label": "Environmental Activist",
    "picture": "images/GretaThunberg 2.jpg",
    "x_pictureFallback": "images/GretaThunberg portrait.jpg",
    "x_title": "Hey There! Glad you're here",
    "summary": "I want a new line\nhere",
    "location": {
      "country": "Sweden",
      "countryCode": "SE",
      "region": "Stockholm"
    },
    "profiles": [
      {......................"

The problem is that the new line is never displayed but it works if I do like this:

 <p className="subtitle is-5 has-text-white has-text-weight-light summary-text">
   <p>I want a new line<br />here</p>
 </p>

Then the output is:

I want a new line
here

This is an React app! Any idea why?

Inspect the DOM in your first example and see what's happening. Not sure what the issue is, but that should show you the difference between example 1 and 2. — user2263572, Aug 05 '20 at 18:19
Thanks I try but not sure what to look for since i'm new to this what I see is the text displayed "I want a new line
here", The `
` is also displayed , any ide? — Erik, Aug 05 '20 at 18:43
Can you copy and paste the DOM in the 2 examples above? Right click "inspect element" on the rendered text in your browser. Copy the DOM element that contains the text, and post that in your question above. I'm guessing the
in your first example is getting rendered as text and not a DOM element. But posting that info will help. — user2263572, Aug 05 '20 at 19:07
[dangerouslySetInnerHtml](https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html) comes to mind — Icepickle, Aug 05 '20 at 19:13
@user2263572 I copy this from the first example I think
I want a new line<br />here — Erik, Aug 05 '20 at 19:16
Does this answer your question? [How to safely render html in react?](https://stackoverflow.com/questions/38663751/how-to-safely-render-html-in-react) — Icepickle, Aug 05 '20 at 19:16
@user2263572 and the second code example you ask for is the working code -
I want a new line
here — Erik, Aug 05 '20 at 19:23
As you can see, {Resume.basics.summary.replace(/(?:\r\n|\r|\n)/g, '
&nbsp')} is not generating the html you expected. The "How to safely render html in react? " link @Icepickle posted is probably a good place to start to figure out why. But this is a react string interpolation question, not really a json/html one. — user2263572, Aug 05 '20 at 19:28
ok I found an answer remarkably posting an answer thanks you all — Erik, Aug 05 '20 at 20:08

Erik · Answer 1 · 2020-08-05T20:14:20.660

For reference, After reading trough the suggested solutions here in comments and answer (Thanks everyone)
I found this Newline in react string Solved, especially yuzu-r answer.

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

But in my case it was a <p> but it works also. What I then did was I keps the json text as is like "I want a new line\nhere". and the the code back to original:

<p className="subtitle is-5 has-text-white has-text-weight-light summary-text">
  {Resume.basics.summary}
</p>

And it works text is "new-lined" as expected

I read in this json text string and it refuses to display with a line break

1 Answers1