import React, {Component} from 'react'
import {range} from '../common/utilities'

const LineBrokenText = (props) => {
  let lines = (props.children || "").split('\n')
  return (
    <div>
      {range(2 * lines.length - 1).map((index) => {
        if (index % 2 == 0) {
          return <span key={index}>{lines[index / 2]}</span>
        } else {
          return <br key={index}/>
        }
      })}
    </div>
  )
}

export default LineBrokenText