Refactor TextInput component

app/gabsocial/features/forms/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { v4 as uuidv4 } from 'uuid';
 
 export class SimpleForm extends ImmutablePureComponent {
@@ -197,21 +198,29 @@ export class TextInput extends ImmutablePureComponent {
     const { label, ...props } = this.props;
     const id = uuidv4();
 
-    return (
+    const containerClassNames = classNames('input', {
-      <div className='input with_label string optional'>
+      'with_label': label,
-        <div className='label_input'>
+      'required': this.props.required,
-          <label className='string optional' htmlFor={id}>{label}</label>
+    });
-          <div className='label_input__wrapper'>
+
-            <input
+    const InputWithLabel = () => (
-              className='string optional'
+      <div className='label_input'>
-              type='text'
+        <label htmlFor={id}>{label}</label>
-              id={id}
+        <div className='label_input__wrapper'>
-              {...props}
+          <Input />
-            />
-          </div>
         </div>
       </div>
     );
+
+    const Input = () => (
+      <input id={id} type='text' {...props} />
+    );
+
+    return (
+      <div className={containerClassNames}>
+        {label ? <InputWithLabel /> : <Input />}
+      </div>
+    );
   }
 
 }