Move ValidatedField component out of render function

package.json

@@ -18,6 +18,7 @@
     "react-redux": "^5.0.2",
     "react-router": "^3.0.5",
     "react-tag-autocomplete": "^5.4.1",
+    "recompose": "^0.25.0",
     "redux": "^3.6.0",
     "redux-form": "^7.0.3",
     "xpub-fonts": "^0.0.2"

src/atoms/ValidatedField.js

 import React from 'react'
+import { compose, withHandlers } from 'recompose'
 import classnames from 'classnames'
 import { Field } from 'redux-form'
 import classes from './ValidatedField.local.scss'
 
 // TODO: pass ...props.input to children automatically?
 
-const ValidatedField = ({ component, ...rest }) => (
-  <Field
-    {...rest}
-    component={({ meta, input }) => (
-      <div className={classes.root}>
-        {component(input)}
+const ValidatedFieldComponent = ({ component }) => ({ meta, input }) => (
+  <div>
+    {component(input)}
 
-        <div className={classes.messages}>
-          {meta.error && (
-            <div className={classnames(classes.message, classes.error)}>
-              {meta.error}
-            </div>
-          )}
+    {console.log(meta)}
 
-          {meta.warning && (
-            <div className={classnames(classes.message, classes.warning)}>
-              {meta.warning}
-            </div>
-          )}
-        </div>
+    {meta.touched && (
+      <div className={classes.messages}>
+        {meta.error && (
+          <div className={classnames(classes.message, classes.error)}>
+            {meta.error}
+          </div>
+        )}
+
+        {meta.warning && (
+          <div className={classnames(classes.message, classes.warning)}>
+            {meta.warning}
+          </div>
+        )}
       </div>
     )}
-  />
+  </div>
+)
+
+const ValidatedField = ({ fieldComponent, ...rest }) => (
+  <Field {...rest} component={fieldComponent}/>
 )
 
-export default ValidatedField
+export default compose(
+  withHandlers({
+    fieldComponent: ValidatedFieldComponent
+  })
+)(ValidatedField)

src/atoms/ValidatedField.md

@@ -8,11 +8,12 @@ const ValidatedFieldForm = reduxForm({
   onChange: values => console.log(values)
 })(ValidatedField);
 
+const TextInput = input => <TextField {...input}/>;
+
 <ValidatedFieldForm 
     name="error" 
     validate={() => 'Required'}
-    component={input => <TextField {...input}/>}
-    />
+    component={TextInput}/>
 ```
 
 ```js
@@ -23,9 +24,10 @@ const ValidatedFieldForm = reduxForm({
   onChange: values => console.log(values)
 })(ValidatedField);
 
+const TextInput = input => <TextField {...input}/>;
+
 <ValidatedFieldForm 
     name="warning" 
     warn={() => 'Expected'}
-    component={input => <TextField {...input}/>}
-    />
+    component={TextInput}/>
 ```