Use <pre /> to display textarea items

src/components/CrudField/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import Field from 'components/Field';
+import FieldView from 'components/FieldView';
 
 import './style.scss';
 
@@ -76,10 +77,12 @@ export default class CrudField extends Component {
         const className = classNames('crud-field', { pending });
 
         return (
-            <span className={className}
+            <FieldView
+                type={type}
+                value={value}
+                className={className}
                 onClick={this.onEditStart}
-
-            >{value}</span>
+            />
         );
     }
 }

src/components/FieldView/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function FieldView({ type, value, ...props }) {
+    if (type === 'textarea') {
+        return (
+            <pre {...props}>
+                {value}
+            </pre>
+        );
+    }
+
+    return (
+        <span {...props}>
+            {value}
+        </span>
+    );
+}
+
+FieldView.propTypes = {
+    value: PropTypes.any,
+    type: PropTypes.string.isRequired
+};
+