Rendering plain text with paragraphs and line breaks as HTML I have text inside a variable that I need to separate in paragraphs, and at the same time respect the manual breaklines.

This is my code:

    {description.split('\n\n').map(paragraph =&gt; (
        &lt;p&gt;
            {paragraph.split('\n').map(
                (line, index) =&gt;
                    index &gt; 0 ? (
                        &lt;span&gt;
                            &lt;br /&gt;
                            {line}
                        &lt;/span&gt;
                    ) : (
                        line
                    )
            )}
        &lt;/p&gt;
    ))}


I am not specially happy with the code. It is not very readable. Any ideas how to improve it?
Two things that help in cases like this (IMHO):


Extract a function for more complex logic or a Array.map callback (e.g. to give a descriptive name and/or avoid nesting) 
Provide descriptive names for non-obvious stuff (e.g. I'd prefer firstLine and remainingLines (or something similar) over using index)


I'd probably do something like this:

description.split('\n\n').map(renderParagraph)

// If you are in a class, this could be a method on the class
function renderParagraph(paragraph) {
  // With fancy ES6:
  const [firstLine, ...rest] = paragraph.split('\n')
  // Or ES5:
  const lines = paragraph.split('\n')
  const firstLine = lines[0]
  const rest = lines.slice(1)

  return (
    &lt;p&gt;
      {firstLine}
      {rest.map(line =&gt; (
        // React.Fragment doesn’t create a wrapper element in the DOM.
        // If you don’t care about that, you can use div instead
        &lt;React.Fragment&gt;
          &lt;br /&gt;
          {line}
        &lt;/React.Fragment&gt;
      )}
    &lt;/p&gt;
  )
}