Line breaks & Paragraphs in React

ReactLinebreak.js

import React, { Fragment } from 'react'

type PropsType = {
  children: string, // yes, the child may only be a string - deal with it.
}

const Text = ({ children }: PropsType) => (
  <Fragment>
    {children.split('\n\n')
    .filter(x => x !== '')
    .map((par, i) => {
      const paragraph = par.split('\n').filter(x => x !== '')
      return (
        <p>
          {
            paragraph.map((line, ii) => (
              <Fragment key={ii}>{line}{(ii < paragraph.length - 1) && <br />}</Fragment>
            ))
          }
        </p>
      )
    })}
  </Fragment>
)

export default Text

/*
Use like this:
const someText = 'your string\n\nbrings all the boys to the yard'
<Text>{someText}</Text>
*/