Display line break content in React with just CSS

Let's say you have an array of strings and you want to display its content inside a paragraph:

const locations = ['Location 1', 'Location 2']
<p>{locations.join('\n')}</p>

That will display all the items inline even if the line break is present :

Location 1 Location 2

Instead of adding unnecessary <br /> tags to the markup you can simply specify a css property to render line breaks:

<p style="white-space: pre-line">{locations.join('\n')}</p>

This will look like:

Location 1
Location 2