You almost got it perfectly.
The only bit that could be changed is the part putting <br/>
tags between lines. If you want to build a JSX element by putting nodes between each array string, I would recommend using reduce
.
Reduce will iterate over your array starting by the indexes 0
and 1
. By outputting an array like the following : [total, <br />, line]
you can build up your paragraph :
paragraph.split('\n').reduce((total, line) => [total, <br />, line])
Working example :
const text = `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum`
const Renderer = () =>
<div>
{text.split('\n\n').map(paragraph =>
<p>
{paragraph.split('\n').reduce((total, line) => [total, <br />, line])}
</p>
)}
</div>
ReactDOM.render(
<Renderer />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'/>