I recently worked on a React website which required me to list a bunch of projects with titles and descriptions.
The data was in this format:
<pre><code class="lang-JSON">{
 title: "Project 1",
 description: "My name is Project 1.\nI am the second line of project 1"
}
</code></pre>
Now if I try to render this text inside a React component, it renders the <code>\n</code> as is without giving a line break that I expected.
At first, I thought of using JavaScript to tackle this and figuring where the <code>\n</code> is and then breaking the text into separate <code>&lt;p&gt;</code> tags from there but I remembered there was a <code>word-break</code> property in CSS, so I decided to search if there is a property for line breaks too.
And lo behold there is, you simply need to use the CSS <code>white-space</code> property on the paragraph element and it will render the text properly with a line break.
<pre><code class="lang-CSS">p {
 white-space: pre-wrap;
}
</code></pre>
<a target="_blank" href="https://css-tricks.com/almanac/properties/w/whitespace/">CSS Tricks</a> has a nice article explaining all the other values you can add to it.
Just the thought of doing this in JavaScript felt like a hack. I'm sure there might be some edge cases that might need JS but for simple use cases, this is an easy and valid approach.

I recently worked on a React website which required me to list a bunch of projects with titles and descriptions.

The data was in this format:
```JSON
{
 title: "Project 1",
 description: "My name is Project 1.\nI am the second line of project 1"
}
```

Now if I try to render this text inside a React component, it renders the `\n` as is without giving a line break that I expected.

At first, I thought of using JavaScript to tackle this and figuring where the `\n` is and then breaking the text into separate `` tags from there but I remembered there was a `word-break` property in CSS, so I decided to search if there is a property for line breaks too.

And lo behold there is, you simply need to use the CSS `white-space` property on the paragraph element and it will render the text properly with a line break.

```CSS
p {
 white-space: pre-wrap;
}
```



[CSS Tricks](https://css-tricks.com/almanac/properties/w/whitespace/
) has a nice article explaining all the other values you can add to it.

Just the thought of doing this in JavaScript felt like a hack. I'm sure there might be some edge cases that might need JS but for simple use cases, this is an easy and valid approach.

Using CSS to render line breaks in JSON data