conditional styling

vikisimovska · Apr 20, 2017 · 1e2b20c · 1e2b20c
1 parent 0bf04da
commit 1e2b20c
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/blog/src/components/posts_new.js b/blog/src/components/posts_new.js
@@ -3,15 +3,20 @@ import { Field, reduxForm } from 'redux-form';
 
 class PostsNew extends Component {
   renderField(field) {
+    const { meta: { touched, error } } = field;
+    const className = `form-group ${touched && error ? 'has-danger' : ''}`;
+
     return (
-      <div className="form-group">
+      <div className={className}>
         <label>{field.label}</label>
         <input
           className="form-control"
           type="text"
           {...field.input}
         />
-        {field.meta.touched ? field.meta.error : ''}
+        <div className="text-help">
+          {touched ? error : ''}
+        </div>
       </div>
     );
   }